手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jquery中animate动画积累的解决方法
jquery中animate动画积累的解决方法
摘要:昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放复制代码代码如下:/*无缝式焦点图*/var_left=770;varle...

昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放

复制代码 代码如下:

<span> </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> </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();

【jquery中animate动画积累的解决方法】相关文章:

使用RequireJS优化JavaScript引用代码的方法

js动态创建及移除div的方法

js实现两点之间画线的方法

jQuery实现延迟跳转的方法

jQuery实现给页面换肤的方法

jQuery子窗体取得父窗体元素的方法

jQuery处理图片加载失败的常用方法

javascript实现行拖动的方法

jQuery取消ajax请求的方法

JQuery中clone方法复制节点

精品推荐
分类导航