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 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
TypeScript 中接口详解
Jun 19 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
vue组件实现进度条效果
Jun 06 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
解决webpack多页面内存溢出的方法示例
Oct 08 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 xml留言板 xml存储数据的简单例子
2009/08/24 PHP
php中用socket模拟http中post或者get提交数据的示例代码
2013/08/08 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
jquery实现垂直无限轮播的方法分析
2019/07/16 jQuery
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[47:26]完美世界DOTA2联赛 LBZS vs Forest 第二场 11.07
2020/11/09 DOTA
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
python素数筛选法浅析
2018/03/19 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Marriott国际:万豪国际酒店查询预订
2017/09/25 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
小学生安全责任书
2014/07/25 职场文书
县委务虚会发言材料
2014/10/20 职场文书
党员自评材料范文
2014/12/17 职场文书
开业典礼致辞
2015/07/29 职场文书
Python控制台输出俄罗斯方块移动和旋转功能
2021/04/18 Python