jquery中animate动画积累的解决方法_jquery
程序员文章站
2022-03-25 21:31:44
...
昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放
/* 无缝式焦点图 */
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了
/* 无缝式焦点图 */
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();
复制代码 代码如下:
/* 无缝式焦点图 */
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了
复制代码 代码如下:
/* 无缝式焦点图 */
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();
上一篇: Python的Django框架中的URL配置与松耦合
下一篇: 自己怎么开通微信小程序
推荐阅读
-
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
-
JQuery中Ajax的Post提交在IE下中文乱码的解决方法
-
html文件中jquery与velocity变量中的$冲突的解决方法
-
jquery开发中缓存问题的几个解决方法
-
jquery中animate的stop()方法作用实例教程分析
-
jquery.ajax的url中传递中文乱码问题的解决方法
-
jQuery中ajax的使用与缓存问题的解决方法
-
JQuery中的事件及动画用法实例教程
-
JQuery动画animate的stop方法使用详解
-
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法