Javascript jQuery通过步骤的自排队循环来动画延迟问题

我有一个

时间线

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

以下是用于将动画排队的函数：

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

以下是

时间线

信息

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} }
        ]
    }
};

下面是将

时间线

放入上述动画功能的函数：

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

这里有一个完整的例子

此代码似乎工作正常，可以单击动画循环和停止按钮来停止动画、清除队列等。但是，我们面临的问题可以通过反复点击停止和启动（比如10次）来触发。然后请注意，延迟不再正常工作，形状移动得更快

---

为什么会出现这种情况？如何解决它？

有些东西在

延迟下工作不太正常

作为一种解决方法，我将其替换为in，因此如下所示：

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

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

正如我所说，与其说是修复，不如说是一种变通方法，因为您还需要重置stop上元素的位置。（注意，我已经从顶部/右侧定义中删除了+=和-=）
查看停止处理程序时，我怀疑.stop（）未被放置。
我会把它对准.圆圈和.正方形，而不是按住div

曾经与animate有过一个问题，因为元素移动得越来越快，cam得出的结论是animate在自己身上堆积

api.jquery.com/clearQueue/，可能有用
有没有任何方法可以通过编程触发此错误？这将有助于调试过程。我可以，但手动停止/启动反映了我们的应用程序的工作方式，我认为当您可以看到它在单击停止/启动按钮之前移动，然后单击停止/启动按钮之后移动时，更容易看到延迟不起作用的效果。添加了多个开始-停止-开始复制：）这真的让动画一团糟。哈哈，也许是同样的问题。如果每个元素只有一个队列，这里会发生什么？好的，这只是一个提示，但对于类似的内容，我真的建议您检查一下。TimeLineSite是一个javascript动画时间轴（播放、重复、回放、搜索等），它使用TweenLite javascript动画引擎为您想要的任何东西制作动画。如果您看一下示例，就会很容易理解，而且jQuery选择器也可以使用。哦，而且要快得多！圆圈和正方形都是操场上的div，所以它的目标是它们，而不是holding div。今天早上我看到了，很抱歉没有读到，但我仍然怀疑stop（）和/或clearQueue（）是你问题的根源。您是否尝试过clearQueue（true）。我已经更新了我的fiddler测试，但没有任何区别：(