9

我有一个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 次）来触发. 然后注意延迟不再正常工作，并且形状移动得更快。

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

4

2 回答 2

1

有些东西不太适合delay...

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

  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 - 当按下停止按钮时，每个都被清除。

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

于 2012-09-07T16:20:33.233 回答
0

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

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

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

于 2012-10-19T09:35:47.690 回答