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


Posted in Javascript onOctober 05, 2013

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

<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();
Javascript 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
checkbox:click事件触发span元素内容改变的方法
Sep 11 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
Jan 07 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 #Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 #Javascript
javascript自启动函数的问题探讨
Oct 05 #Javascript
纯js简单日历实现代码
Oct 05 #Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 #Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 #Javascript
jquery parent和parents的区别分析
Oct 02 #Javascript
You might like
php 使用post,get的一种简洁方式
2010/04/25 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
JavaScript Base64编码和解码,实现URL参数传递。
2006/09/18 Javascript
javaScript对象和属性的创建方法
2007/01/15 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
浅析js中取绝对值的2种方法
2013/07/09 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
jQuery 选择符详细介绍及整理
2016/12/02 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
微信小程序调用后台service教程详解
2020/11/06 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
Python数据类型详解(二)列表
2016/05/08 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python中format()格式输出全解
2019/04/12 Python
python requests指定出口ip的例子
2019/07/25 Python
Python 使用type来定义类的实现
2019/11/19 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
户外婚礼策划方案
2014/02/08 职场文书
母婴店促销方案
2014/03/05 职场文书
商铺门前三包责任书
2014/07/25 职场文书
公证委托书标准格式
2014/09/11 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
安全生产工作汇报
2014/10/28 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
天河观后感
2015/06/11 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript