jQuery animate opacity is jerky in Webkit until I resize the browser
I have a simple slideshow using .animate({opacity:0}) with the animated images having a css width of 100% so that they stretch across the page. In Chrome and Safari, the animation is very jerky, a few frames per second. However, resizing the window makes the animation smooth, even if I resize it to the size it originally was or larger.
I thought perhaps I could emulate a browser resize with window.onresize(); but unfortunately this does not make the animation smooth. Is there a better way to emulate a window resize?
<body>
<img src="1.jpg" />
<img src="2.jpg" />
</body>
<style>
*{margin:0;padding:0;}
body{overflow:hidden;}
img{position:absolute;width:100%;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var imgs;
function animate(img) {
var $img = $(imgs[img]);
var next = (imgs[img+1]) ? img+1 : 0;
$img.appendTo('body').animate({opacity: 1},1000,function(){
$(imgs[next]).css({opacity:0});
animate(next);
});
}
$(document).ready(function(){
imgs = $('img').css({opacity: 0});
});
$(window).开发者_Go百科load(function(){
animate(0)
});
</script>
加载中,请稍侯......
精彩评论