1

後に起動することを意図したコールバック関数を作成しました

$('.menuIco').not($(this)).fadeOut()

しかし、1 つのコールバックの代わりに、9 つのコールバックがあります (おそらく 10-1=9 要素のためnot($(this)))。

なんで？そしてそれを防ぐ方法は？

変数を使用して回避策を使用していますが、あまり専門的ではないようです。

var loaded = false;

$('.menuIco').not($(this)).fadeOut(function() { // hide all icons but one
    if(loaded==false) {
        loaded = true;

        $('.menuIco p').addClass("icoCaptionOff");
        $(menuIco).animate({top: "20", left: "-100"}, "fast", function() {
            LoadContent($(menuIco).attr('id'));

        });
    }
});
4

4 に答える 4

3

.promise()を使用して、すべての要素のアニメーションが完了した後にコールバックを実行できます

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

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

$('.menuIco').not(this).fadeOut().promise().done(function () {
    $('.menuIco p').addClass("icoCaptionOff");
    $(menuIco).animate({
        top: "20",
        left: "-100"
    }, "fast", function () {
        LoadContent($(menuIco).attr('id'));

    });
});
于 2013-09-05T11:11:26.593 に答える
1

whenおよびthen遅延ハンドラーを使用して、別の関数が完了したときに関数を実行できます。

1 つ以上のオブジェクト (通常は非同期イベントを表す Deferred オブジェクト) に基づいてコールバック関数を実行する方法を提供します。

ドキュメント: http://api.jquery.com/jQuery.when/

コード：

$('.menuIco').click(function () {
    $.when($('.menuIco').not(this).fadeOut()).then(function () {
        console.log('foo')
    })
})

デモ: http://jsfiddle.net/IrvinDominin/hvm79/

于 2013-09-05T11:18:45.593 に答える
1

おそらく class を持つ複数の要素があり.menuIcoます。したがって、コールバックでは、再度$(this)選択する代わりに使用する必要があります$('.menuIco p')。

var loaded = false;

$('.menuIco').not($(this)).fadeOut(function() { // hide all icons but one
    var $this = $(this);

    if(loaded==false) {
        loaded = true;

        $this.find('p').addClass("icoCaptionOff");
        $this.animate({top: "20", left: "-100"}, "fast", function() {
            LoadContent($this.attr('id'));
        });
    }
});
于 2013-09-05T11:11:15.023 に答える
0

$(this)おそらく、すべてのコールバック関数ではなく、すべてにコールバックを適用する必要があります.menuIco。

$('.menuIco').not(this).fadeOut(function() { // hide all icons but one

        $(this).find('p').addClass("icoCaptionOff");

        $(this).animate({top: "20", left: "-100"}, "fast", function() {
            LoadContent($(this).attr('id'));
        });

});
于 2013-09-05T11:09:28.033 に答える