jquery中animate动画积累的解决方法
更新时间：2013年10月05日 15:56:26 作者：
setTimeout使用时会产生动画队列，有可能是在chrome浏览器中窗口不处于最前端时动画的队列产生积累，下面为大家介绍下详细的解决方法
昨天一同学向我求助，说做了一个简单的动画效果，就是图片自动左右播放
<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();
复制代码 代码如下:
<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();
相关文章
查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。2011-02-02
其实就是利用了jquery的ajax功能，获取远程的xml文件，读取指定内容的代码，对于学习jquery的朋友是个不错的参考。2009-12-12
这篇文章主要介绍了jquery插件开发模式,结合实例形式详细分析了jQuery插件三种开发方式实现方法与相关操作技巧,需要的朋友可以参考下2019-07-07
实现的效果有点类似于Google picasa相册不同尺寸图片的切换效果。本实例通过文字大小（font-size）控制图片尺寸的做法是跟Google学习的，但是jQuery代码是根据效果自己想出来的，逻辑很简单，没有什么精妙之处2012-05-05
这篇文章主要介绍了jQuery序列化form表单数据为JSON对象的实现方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
这篇文章主要介绍了Jquery Ajax方法传值到action的方法,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery实现的右下角广告窗体跟随效果,涉及jQuery结合时间函数动态操作页面元素属性的相关技巧,需要的朋友可以参考下2016-09-09
jQuery Lightbox（balupton版）图片展示插件demo2010-04-04
浏览网页时不小心会碰到这样的一个网站有幻灯片而且每个数字上面都带有进度条闲的无聊,自己用jquery实现了一个,因为有一个进度条的播放过程暂不支持ie6，热爱特效的你可不要错过了哈2013-02-02
本篇文章主要是对jquery选择器之内容过滤选择器进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
最新评论