浏览器标签页切换时jquery动画的问题

最近公司在做大屏设备上的页面，其中动画的部分居多，开始的时候是用的jquery做的动画，在做完后无意中发现jquery动画存在一个问题，就是浏览器在切换标签页后，过段时间切换回来页面中的动画会出现连续执行，知道运动切换出去的时长后才能恢复正常动画。出现这种情况后还特意看了下css3实现动画的页面，没有出现类似的问题

在查了资料后总结了下原因：

我的自动轮播采用的是定时器+jquery fadeIn()/ fadeOut()方法实现的，当我们离开轮播页（并未关闭该页面）后，定期器继续运行，但是动画效果并没有同步运行，而是被浏览器缓存起来了（“动画累积”），当我们返回轮播页后，积累了一段时间的动画才重新开始连续运行，这就导致了轮播混乱，直到累积的效果运行完毕，才重新开始正常的轮播

$('#rightarticle .banner ul').stop(true,true).animate({ left: rightliwidth * index }, 1000, 'linear', function () {

        $('#rightarticle li').eq(index + 2).addClass('active').siblings().removeClass('active')

}

解决方法就是添加一个

stop(true,true)

执行的意思是，在动画执行之前先清除之前浏览器缓存起来的动画。在添加后再查看就不会出现之前的情况了。

巴特西

浏览器标签页切换时jquery动画的问题

最新文章

热门文章