jquery中animate动画积累的解决方法

134 阅读 0 评论 89 点赞

我是靠谱客的博主能干棉花糖，最近开发中收集的这篇文章主要介绍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(); 