12

私は次のjQueryを持っています:

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300 );
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

私の問題は、両方が同時に発生することです。最初のアニメーションが終了したら、div2 アニメーションを開始したいと思います。以下の方法を試してみましたが、同じことを行います。

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, ShowDiv() );
....
function ShowDiv(){
   $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);
}

最初のものが終了するのを待つにはどうすればよいですか?

4

6 に答える 6

21

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

animate には「完了」機能があります。2 番目のアニメーションは、最初の完全な関数に配置する必要があります。

編集: 例http://jsfiddle.net/xgJns/

$("#div1").animate({opacity:.1},1000,function(){
    $("#div2").animate({opacity:.1},1000);    
});​
于 2011-05-24T20:44:05.357 に答える
2 
$(function(){
    $("#div1").animate({ width: '200' }, 2000).animate({ width: 'toggle' }, 3000, function(){
    $("#div2").animate({ width: 'toggle' }, 3000).animate({ width: '150' }, 2000);
    });
});

http://jsfiddle.net/joaquinrivero/TWA24/2/embedded/result/

于 2011-05-24T20:55:48.017 に答える
1

タイムアウトを使用せず、完全なコールバックを使用してください。

$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function(){

  $("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200);

});
于 2011-05-24T20:50:58.220 に答える
1

kingjiv の発言に従って、completeコールバックを使用してこれらのアニメーションを連鎖させる必要があります。2 番目の例では、ShowDiv コールバックの直後に括弧を付けて実行していることを除けば、ほぼ同じです。ShowDivの代わりに設定するShowDiv()と、動作するはずです。

mcgrailm の応答 (これを書いているときに投稿) は事実上同じもので、コールバックに無名関数を使用するだけです。

于 2011-05-24T20:51:09.310 に答える
1

animate(..)アニメーションの完了後に呼び出される関数にパラメーターとして関数を渡すことができます。そのようです：

$('#div1').animate({
    width: 160
}, 200, function() {
    // Handle completion of this animation
});

以下の例は、パラメーターのより明確な説明です。

var options = { },
    duration = 200,
    handler = function() {
        alert('Done animating');
    };

$('#id-of-element').animate(options, duration, handler);
于 2011-05-24T20:44:57.840 に答える
0 
$("#div1").animate({ width: '160' }, 200).animate({ width: 'toggle' }, 300, function () {
$("#div2").animate({ width: 'toggle' }, 300).animate({ width: '150' }, 200); });

これは私にとってはうまくいきます。元のコードが機能しない理由がわかりません。たぶん、匿名関数に入れる必要がありますか?

于 2011-05-24T20:56:06.517 に答える