4

私は Javascript と jQuery を初めて使用し、jQuery Transit プラグインを使用して 3 つの div を同時にアニメーション化しようとしています。それぞれに一意の ID があり、すべて同じクラスです。

現在、Transit のドキュメントによると、次のようにアニメーションをキューに入れることができます。

$('.anim')
.transition({ x: 40}, 4000)
.transition({ y: 40}, 4000);

ID を使用して呼び出すすべての要素でこれを使用すると、トランジションは正常に機能します。ここでjsfiddleを参照してください。

しかし、クラス名で呼び出すことにより、すべての要素で同時に使用しようとすると、最初のトランジションのみが機能し、他のトランジションは持続時間のあるスムーズなトランジションではなく、変更された位置にジャンプします。ここでjsfiddleを参照してください。

この動作は、位置や不透明度などに関係なく、jsfiddle だけでなく、私が取り組んでいるローカル ページでも発生します。 . コードの書き方をいろいろ試してみましたが、ID を使用した場合にしか機能しません。（間隔なしで使用しても違いはありませんでした）。

クラスの例が正しく機能しない理由、またはそれを修正するために何ができるかを誰かが説明できますか?

また、ブラウザでこの jsfiddle の例で奇妙なことが起こりました。別のタブまたはプログラムに移動して jsfiddle に戻った後、突然クラスの例が正常に機能し、id の例では、1 つのトランジションをスキップしたように、ボックスが同期していないように見えました。 . これは Chrome だけでなく Firefox でも同様でした。フィドルを更新した後、クラスの例は再び不安定になり、id の例は再び適切に機能しました。（私はこれを何度も試しました..非常に奇妙なもの...

ローカル サイトでこの動作を再現できませんでした。これは、間隔関数と一緒に jsfiddle/browser の問題である可能性がありますか?

4

1 に答える 1

2

使用each():

デモ

_anim.each(function(){
    $(this).transition({ x: 40}, 1000)
        .transition({ y: 40}, 1000)
        .transition({ x: 0}, 1000)
        .transition({ y: 0}, 1000);
});
于 2015-04-16T12:29:47.437 に答える