0

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

ページに 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

ありがとうござい
ます

4

4 に答える 4

3

さて、「気の利いた 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」があります:)

于 2010-01-09T14:53:51.380 に答える
0

なぜこれが起こるのでしょうか？つまり、同時にアニメーションを開始しているように見えます (.fadeOut結局のところ、呼び出しは 1 つだけですよね?)。.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はあまり強力ではないことを認めなければなりません:)

于 2010-01-09T13:24:26.067 に答える
0

解決策は、フェードイン関数で setTimeout を使用することです

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

そのJavaScript関数は、フェードイン関数のトリガーを300ミリ秒遅らせます

于 2010-01-09T13:31:34.697 に答える
0

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

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

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

ステップの使用方法のデモまでスクロールすると、単一のオブジェクトで animate を呼び出し、ステップを使用してアニメーションの各ステップで残りのセットを更新する方法がわかります。この方法では、アニメーションの完了時に発生するコールバックが 1 つだけになります。

于 2012-03-19T20:43:29.363 に答える