Question

我有一个简单的幻灯片，使用.animate（{opacity：0}），动画图片的css宽度为100％，以便它们在页面上伸展。在Chrome和Safari中，动画非常生涩，每秒几帧。但是，调整窗口大小会使动画变得平滑，即使我将其调整到原来的大小或更大。

我想也许我可以使用window.onresize（）模拟浏览器调整大小;但不幸的是，这并没有使动画流畅。有没有更好的方法来模拟窗口调整大小？

<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).load(function(){
  animate(0)
});

</script>

在我调整浏览器大小之前，jQuery animate opacity在Webkit中是不稳定的

0 个答案: