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（）の配置が間違っているのではないかと思います。保持divではなく.circleと.squareをターゲットにします。

要素がどんどん速く動いていて、アニメーションが自分自身に積み重なっているという結論に達するので、アニメーションで一度問題がありました。

api.jquery.com/clearQueue/およびhttp://api.jquery.com/stop/が役立つ場合があります

于 2012-10-19T09:35:47.690 に答える