1

1つのことが完全に実行されたときにのみ何かを実行したいとします。次のようにします。

$('#content-1').fadeIn(function() {
   $("menue").slideUp();
});

しかし、異なるアクションを持つ複数のものが完全に実行された場合にのみ、何かを実行する必要がある場合はどうなりますか？このような：

$('#content-1').fadeIn();
$('#content-2').fadeOut();
function() {
    $("menue").slideUp();
}

分離して繰り返すことなくこれを行うにはどうすればよいですか？

4

4 に答える 4

2

コールバックを使用します：

$('#content-1').fadeIn(500, function() {
    $('#content-2').fadeOut(500, function() {
        $("menue").slideUp();
    });
});

または、複数のイベントを同時に発生させる必要がある場合：

var content1_complete = false;
var content2_complete = false;
var callback = function() {
    $("menue").slideUp();
}
$('#content-1').fadeIn(500, function() {
    content1_complete = true;
    if (content1_complete && content2_complete) {
        callback();
    }
}
$('#content-2').fadeIn(500, function() {
    content2_complete = true;
    if (content1_complete && content2_complete) {
        callback();
    }
}

ただし、イベントに同じ時間がかかる場合は、イベントも同時に完了する必要があることに注意してください。その場合、そのようなフラグを設定する必要はありません。

于 2012-07-22T04:12:24.223 に答える
1

各コールバックでグローバルフラグなどを設定して凝ったことを行うこともできますが、アクションの正確な期間が重要でない場合、最も簡単な解決策は、アクションを同じ期間に設定してから、コールバックを1つだけに設定することです。

$('#content-1').fadeIn(400);
$('#content-2').fadeOut(400, function() {
   $("menue").slideUp();
});

content-1交換するためにフェードインしているように聞こえるのでcontent-2、とにかく、これはおそらく最も美的に楽しい動作です。

デフォルトでは、jQueryはすべてのフェードアニメーションに同じデフォルトの期間を割り当てる400ため、期間をまったく指定しなくても機能することに注意してください。ただし、将来の開発者が実行して確認する必要がないように、それらを定義する明示性が気に入っています。確認するためのドキュメント。それでも、これは問題なく機能するはずです。

$('#content-1').fadeIn();
$('#content-2').fadeOut(function() {
   $("menue").slideUp();
});
于 2012-07-22T04:14:51.960 に答える
1

アップデート：

使用できるpromise()方法done()：

$('#go').click(function () {
    $('#content-1').fadeIn(1000);
    $('#content-2').fadeOut(5000);
    $('#content-1, #content-2').promise().done(function(){
        $("#menu").slideUp();
    })
});

デモ

于 2012-07-22T04:17:43.167 に答える
1

このような

var myanimationstate=0;
$('#content-1').fadeIn(function(){
    if(myanimationstate){
        myslideup();
        myanimationstate=0;
    }else{
        myanimationstate++;
    }
);
$('#content-2').fadeOut(function(){
    if(myanimationstate){
        myslideup();
        myanimationstate=0;
    }else{
        myanimationstate++;
    }
);
function myslideup() {
    $("menue").slideUp();
}
于 2012-07-22T04:17:58.513 に答える