jquery中animate动画积累的解决方法
昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放
代码如下:
<span style="white-space:pre"> </span>/* 无缝式焦点图 */ var _left = 770; var left = -_left;//-770 function slideImg() { if(left == -3080 || left == 0) { _left = -_left; } $('.slidepics').animate({'left': left + 'px'},1000); left = left - _left; tim = setTimeout(slideImg,5000); } slideImg();
代码如下:
我瞅了下,挺简单的,乍一看,没啥问题啊。后来他就说了困扰他一个月的奇怪问题,他说窗口在最前端时是ok,但把窗口最小化或是浏览其他窗口时就话出现快速的播放,过了一会儿又正常了(ie是没问题的,chrome有问题,firefox也没问题)。 由于以前也没遇到过此问题,我也是想了半个多小时,没搞定,后来翻了翻以前做的笔记,有了答案,那个setTimeout使用时会产生动画队列,有可能是在chrome浏览器中窗口不处于最前端时动画的队列产生积累,当回归最前端时便一下子爆发出来了,于是想到jquery中的stop方法,该方法是停止所有在此元素上的动画。果然,加上后就ok了
代码如下:
<span style="white-space:pre"> </span>/* 无缝式焦点图 */ var _left = 770; var left = -_left;//-770 function slideImg() { if(left == -3080 || left == 0) { _left = -_left; } $('.slidepics').stop().animate({'left': left + 'px'},1000); left = left - _left; tim = setTimeout(slideImg,5000); } slideImg();
相关推荐
89463661 2019-12-04
suis 2019-11-16
LingPF 2019-11-08
钱多多 2013-05-29
王福朋 2018-02-28
CandyGoo 2014-08-19
84483065 2019-03-25
limengmeng00 2018-08-22
CrazyDogWang 2017-02-14
无情 2015-06-25
liusure0 2015-06-11
zyhui 2015-06-10
富贵 2015-01-16
zhangmingming 2013-05-29
XiaoSpring 2011-01-24
Haoroid 2018-01-16
natineprince 2017-03-15
87244857 2019-05-08
natineprince 2016-07-13