Question

我正在使用循环插件，除了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;
}

Answer 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);
    }
});

IE中的jQuery循环动画中断

1 个答案: