jQuery animate opacity is jerky in Webkit until I resize the browser_问答_开发者

jQuery animate opacity is jerky in Webkit until I resize the browser

开发者 https://www.devze.com 2023-03-31 12:45 出处：网络

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>