1

次のようなjQuery関数があります。

$.get(urlCall, function (data) {
    $('#divId').children().fadeOut("slow", function() {
        $('#divId').append(data);
        $('#divId').fadeIn("slow");
    });
});

問題は、'#divId' の下の各子に対して、append と fadeIn の行を 1 回呼び出していることです。ラインを待っていた

$('#divId').children().fadeOut("slow", function() {

すべての子をフェードアウトしてから、function() を 1 回実行します。しかし、各子に対して function() を1回実行しているため、追加したくない多くの行を追加しています。

「すべての子をフェードアウトしてから X を 1 回実行する」という方法があるはずですが、その方法がわかりません。

ヘルプ？

4

3 に答える 3

7

.promise()を使用できます

$('#divId').children().fadeOut("slow").promise().done(function() {
    $('#divId').append(data);
    $('#divId').fadeIn("slow");
});

.promise() メソッドは動的に生成された Promise を返します。この Promise は、コレクションにバインドされた特定のタイプのすべてのアクション (キューに入れられているかどうかに関係なく) が終了すると解決されます。

デフォルトのタイプは「fx」です。これは、選択した要素のすべてのアニメーションが完了すると、返された Promise が解決されることを意味します。

反対票を投じた人のために

デモ:フィドル

于 2013-10-17T16:26:38.087 に答える
2

これを確実に行う唯一の方法は、完了したアニメーションの数を追跡し、元のアニメーションの数と比較する独自の関数を作成することです。何かのようなもの：

var target = $("#divId"),
    children = target.children();

$("#trigger").on("click", function () {
    toggleFadeAll(children, function () {
        $("#message").fadeToggle();
    });
});

function toggleFadeAll(els, callback) {
    var counter = 0,
        len = els.length;
    els.fadeToggle(function () {
        if (++counter === len) {
            callback.call(null);
        }
    });
}

デモ: http://jsfiddle.net/jbE3C/

(これは明らかに、実際に発生させたいアニメーションに基づいて調整する必要があります)

すべてのアニメーションが完了toggleFadeAllすると、提供されたコールバックが呼び出されます。fadeToggle

要素に他のアニメーションが発生している可能性がある場合、使用.promise()は失敗します (適切な時点で目的のコールバックを実行しません)。

于 2013-10-17T16:38:42.683 に答える
1

フェードとアペンドを分けてみませんか？だからそうなるだろう

$.get(urlCall, function (data) {
    $('.someElement').each(function(){
         $('.fadeElement').fadeIn();

    });

    $('.otherElement').append(data)
});
于 2013-10-17T16:27:59.843 に答える