浏览器标签页切换时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)

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