2011-01-28 76 views
0

我正在使用循环插件,除了IE8以外,它看起来不错。有人有主意吗?IE中的jQuery循环动画中断

直播:http://daveywhitney.com/moons/

<!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; 
} 

回答

0

这是因为你设置的CSS不透明度的元素,这就是为什么在你的PNG图像边缘显得粗糙。您可能需要查看插件的来源。

$(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用户