IE 中的 jQuery 循环动画中断答案

【问题标题】：jQuery cycle animation breaks in IEIE 中的 jQuery 循环动画中断
【发布时间】：2011-07-06 16:21:15
【问题描述】：

我正在使用循环插件，它看起来很棒，当然 IE8 除外。有人有什么想法吗？

<!DOCTYPE html> 
<html> 
<head> 
<title>MOON</title> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script type="text/javascript" src="http://daveywhitney.com/moons/jquery.cycle.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.centermoon').cycle({
        fx: 'fade',
        timeout: 1000,
        speed:  500,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.moonpieces').cycle({
        fx: 'curtainX',
        timeout: 1100,
        speed:  1500,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript"> 
$(document).ready(function() {
    $('.fadenav').cycle({
        fx: 'curtainX',
        timeout: 1500,
        speed:  500,
        nowrap:  1
    });
});
</script> 
<script type="text/javascript">
$(document).ready(function(){   
    $('#navfade').fadeIn(2000);
});
</script>

</head> 
<body> 
<div id="wrapper">
<div id="logo">
<img class="full" src="http://daveywhitney.com/moons/img/logo.png" />
</div>

<div id="moonwrap">
    <div class="centermoon"> 
        <img src="http://daveywhitney.com/moons/img/spacer.png"  /> 
        <img src="http://daveywhitney.com/moons/img/centermoon.png"  /> 
    </div> 
    <div class="moonpieces">
    <img src="http://daveywhitney.com/moons/img/spacer.png"  />
    <img src="http://daveywhitney.com/moons/img/moonpieces.png"  />
    </div>
</div>
<div id="navfade" style="display:none;">


<ul id="nav">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Production Services</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Marketing Services</a></li>
<li><a href="#">Client List</a></li>
<li><a href="#">Client Login</a></li>
</ul>
</div>
</div>
</body> 
</html>

css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* END RESET - BEGIN LAYOUT */

html {
    background-image:url('http://daveywhitney.com/moons/img/bg.jpg');
}

#logo {
    width:700px;
    height:136px;
    margin:0 auto;
}

#wrapper {
width:1020px;
margin:0 auto;
}

#moonwrap {
    width:1020px;
    height:455px;
    margin:0 atuo;

}
.moonpieces {
    position: absolute;
    z-index: -1;
}

.centermoon {

    position: absolute;
}

#nav {
width:980px;
margin:40px 0 0 40px;
padding:0; 
}
#nav li {
display:inline;
padding:0;
margin:0 60px 0 0;
color:#fff;
}

【问题讨论】：

标签： jquery html internet-explorer jquery-cycle

【解决方案1】：

这是因为您在元素上设置了 css 不透明度，这就是为什么您的 PNG 上的边缘看起来很粗糙。您可能需要查看插件的源代码。

目前，您无法为 IE 用户制作动画，例如（未测试）：

$(document).ready(function(){   
    if(!$.browser.msie) {    
    $('.centermoon').cycle({
        fx: 'fade',
        timeout: 1000,
        speed:  500,
        nowrap:  1
    });
    $('.moonpieces').cycle({
        fx: 'curtainX',
        timeout: 1100,
        speed:  1500,
        nowrap:  1
    });
    $('.fadenav').cycle({
        fx: 'curtainX',
        timeout: 1500,
        speed:  500,
        nowrap:  1
    });
    $('#navfade').fadeIn(2000);
    }
});

【讨论】：