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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
Apr 15 Javascript
实现JavaScript高性能的数据存储
Dec 11 Javascript
基于jQuery实现的查看全文功能【实用】
Dec 11 Javascript
angular4 如何在全局设置路由跳转动画的方法
Aug 30 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
Aug 10 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
JS实现简单贪吃蛇小游戏
Oct 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多个文件及图片上传实例详解
2014/11/10 PHP
Laravel5中contracts详解
2015/03/02 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
使用正则替换变量
2007/05/05 Javascript
用cssText批量修改样式
2009/08/29 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
2017/03/09 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
jQuery实现简单飞机大战
2020/07/05 jQuery
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
python shell根据ip获取主机名代码示例
2017/11/25 Python
python用户管理系统的实例讲解
2017/12/23 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
Python基础教程之异常详解
2019/01/10 Python
Pytorch中实现只导入部分模型参数的方式
2020/01/02 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
Python 如何在字符串中插入变量
2020/08/01 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
商务助理岗位职责
2013/11/13 职场文书
环保倡议书范文
2014/05/12 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
2016初一新生军训心得体会
2016/01/11 职场文书