Непрозрачность jQuery animate в Webkit не работает, пока я не изменю размер браузера - PullRequest
Новая
       31

Непрозрачность jQuery animate в Webkit не работает, пока я не изменю размер браузера

1 голос
/ 26 августа 2011

У меня есть простое слайд-шоу с использованием .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>
...