解决jquery中animate动画积累

昨天一同学向我求助,说做了一个简单的动画效果,就是图片自动左右播放

	/* 无缝式焦点图 */
        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();


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值