jQuery cycle animation breaks in IE
I am using the cycle plugin and it looks great EXCEPT for of course IE8. Anyone have any ideas?
Live: 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;
}
It is because you've set css opacity on the element, that is why the edges on your PNGs look rough. You may have to look in the source of your plugin.
For now, you could not animate for IE users with something like (not tested):
$(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);
}
});
加载中,请稍侯......
精彩评论