欢迎来到代码驿站!

jquery

当前位置:首页 > 网页前端 > jquery

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

时间:2021-02-18 11:21:59|栏目:jquery|点击:
昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放
复制代码 代码如下:

<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();

上一篇:jQuery实现文件上传进度条特效

栏    目:jquery

下一篇:JQuery实现简单的服务器轮询效果实例

本文标题:jquery中animate动画积累的解决方法

本文地址:http://www.codeinn.net/misctech/65566.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有