jQuery複数の要素をアニメーション化します

StackOverflow https://stackoverflow.com/questions/2033467

質問

私は次のことをしようとしています：

ページに2セットのDOM要素があります。最初のセットのすべての要素にはクラスがあります display-element, 、そして2番目の要素セットがクラスを運びます edit-element.

これでボタンがあります（id =edit-button）。このボタンをクリックすると、すべてが欲しい display-elements フェードアウトするために、そしてすべて edit-elements 現れる。

私は自然にしました：

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    });
});

驚いたことに、これは期待どおりに機能しなかったことがわかりました。これが起こったことです：クラスの最初の要素とすぐに display-element フェードアウト、すべて edit-elements フェードインし始めました。

今、私がすべてを手に入れることができる簡単な方法（おそらく私が見逃したドキュメントの何か）はありますか edit-elements フェードインを開始します 結局のところ display-elements フェードアウトしましたか？

ありがとう
JRH

役に立ちましたか？

解決

なぜこれが起こるのでしょうか？つまり、アニメーションを同時に開始しているように見えます（ .fadeOut 結局のところ、そうですか？）。私は推測します、これは$（）が配列を生成し、あなたが電話するときだからです .fadeOut, 、jQueryは配列を繰り返し、それぞれの要素に対して実行するものを何でも実行します。最初から始めます。コールバックはすべてのアニメーションに「添付」されるため、最初のコールバックの目に見える効果がわかります。

返された要素の配列を自分で繰り返して、最後の要素にのみコールバックを添付することを確認することで、これを回避できます。

$('#edit-button').click(function(){
    var display_elements = $('.display-element');
    var len = display_elements.length;
    for (var i = 0; i < len-1; i++) {
        $(display_elements[i]).fadeOut(300); // no callback
    }
    $(display_elements[len-1]).fadeOut(300, function() {
        $('.edit-element').fadeIn(300);
    }); // last element - attach callback
});

コードがオフになっていれば申し訳ありませんが、私のjavascript-fuがそれほど強くないことを認めなければなりません:)

他のヒント

まあ、「気の利いたAPIメソッド」が見つからなかったので、私はこれを決心しました：

$('#edit-button').click(function() {
    var displays = $('.display-element');
    var counter = 0;
    var max = displays.length;
    displays.fadeOut(300, function() {
        counter++;
        if( counter>=max ) $('.input-element').fadeIn(300);
    }
});

これは本質的に @Shylentの答えであり、より多くの「JavaScript-fu」:)

解決策は、機能のフェージングでSetimeOutを使用することです

$('#edit-button').click(function(){
    $('.display-element').fadeOut(300);
setTimeout("$('.edit-element').fadeIn(300);", 300);
});

そのJavaScript関数は、300ミリ秒間の機能のフェージングのトリガーを遅らせるでしょう

同様の問題を実行したばかりで、「ステップ」コールバックオプションが望ましい動作をもたらしたことがわかりました。

ステップ：アニメーションの各ステップの後に呼び出される関数。

^ http://api.jquery.com/animate/

ステップの使用についてはデモまで下にスクロールすると、単一のオブジェクトでAnimateを呼び出す方法が表示され、ステップを使用してアニメーションの各ステップで残りのセットを更新する方法が表示されます。これにより、アニメーションが完了したときに1つのコールバックが発射されます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top