jQuery动画延迟问题与自排队循环的步骤

Posted 2023-05-08

【中文标题】jQuery动画延迟问题与自排队循环的步骤

【英文标题】：jQuery animate delay issues with self -queued looping of steps

【发布时间】：2012-08-31 06:58:56

【问题描述】：

我有一个timeline 定义，其中列出了选择器以及应用于该对象的延迟和动画列表。您可以指定循环特定对象的步骤。

这里是用于对动画进行排队的函数：

function animateWithQueue(e, obj) 
    if ($.queue(e[0]).length == 0) 
        e.queue(function doNext(next) 
            $.each(obj.steps, function(i, step) 
                e.delay(step.pause).animate(step.anim, step.options);
            );
            if (obj.loop) 
                e.queue(doNext);
            
            next();
        );
    
​

这里是timeline信息

var timeline = 
    '.square': 
        loop: true,
        steps: [
             pause: 800, anim:  right: '+=200' , options:  duration: 400 ,
             pause: 1000, anim:  right: '-=200' , options:  duration: 400 
        ]
    ,
    '.circle': 
        loop: true,
        steps: [
             pause: 1200, anim:  top: '+=200' , options:  duration: 400 ,
             pause: 1200, anim:  top: '-=200' , options:  duration: 400 
        ]
    
;

这是将timeline 放入上述动画函数的函数：

$.each(timeline, function(selector, obj) 
    animateWithQueue($(selector), obj);
);

这是一个完整的例子。 http://jsfiddle.net/sprintstar/Tdads/

这段代码看起来工作正常，动画循环和停止按钮可以被点击来停止动画，清除队列等。但是我们面临的问题可以通过点击停止和一遍又一遍的开始来触发（比如10倍）。然后注意延迟不再正常工作，并且形状移动得更快。

为什么会这样，如何解决？

【问题讨论】：

有什么方法可以通过编程方式触发错误吗？这将有助于调试过程。

我可以，但是手动停止/启动反映了我们的应用程序是如何工作的，我认为当你看到它之前移动时，更容易看到延迟不起作用的效果，然后点击之后停止/开始按钮。

添加多个start-stop-start jsfiddle.net/tjdA3转载:)

这真的把动画搞砸了。大声笑虽然可能是同样的问题。如果每个元素只有一个队列，这是怎么回事？

好的，这只是一个提示，但对于这样的事情，我真的建议您查看greensock.com/v12。 TimelineLite 是一个 javascript 动画时间线（播放、重复、倒带、搜索等），它使用 TweenLite Javascript 动画引擎来制作任何你想要的动画。如果您查看示例并且还可以与 jQuery 选择器一起使用，这真的很容易理解。哦，它的速度更快！

【参考方案1】：

delay 出现了一些问题...

作为一种解决方法，我在this fiddle 中将其替换为doTimeout，因此如下：

  e.delay(step.pause).animate(step.anim, step.options);

变成：

    var timerName = e[0].className + $.now();
    timeouts.push(timerName);
    e.queue(function(next) 
      e.doTimeout(timerName, step.pause, function() 
          this.animate(step.anim, step.options);
          next();
        );
    );

timeouts 是一组唯一的超时 id - 当按下停止按钮时，每一个都会被清除。

正如我所说，与其说是修复，不如说是一种解决方法，因为您还需要在停止时重置元素的位置。 （请注意，我已从顶部/右侧定义中删除了 += 和 -=）

【参考方案2】：

查看您的停止处理程序，我会怀疑 .stop() 未放置。 我会将它定位在 .circle 和 .square 上，而不是持有 div。

曾经遇到过 animate 的问题，因为元素移动得越来越快，并且得出的结论是 animate 正在堆积在自己身上。

api.jquery.com/clearQueue/ 和 http://api.jquery.com/stop/ 可能有用

【讨论】：

圆形和方形都是操场上的 div，所以它确实针对它们，而不是控股 div。

我今天早上看到了，抱歉误读，但我仍然怀疑 stop() 和/或 clearQueue() 是您问题的根源。你试过 clearQueue(true)。

我已经更新了我的提琴手测试，但没有任何区别。 :(