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