0

次のように動作する移動アニメーションがあります。

 function showMessage() 
 {
     $('#message').stop().show().animate({top: '60px'}, 500, 'easeOutExpo');
 }      

 function hideMessage(msg,hide) 
 {
     $('#message').stop().delay(time).animate({ top: '0px' }, 600, 'easeInExpo');
 }

アニメーションは、アイテムを表示時に 60px に移動し、非表示にすると 0px に戻します。問題は、hideMessage が完了する前に showMessage が開始されると、醜いジャンプ アニメーションが表示されることです。

私が望むのは、showMessage アニメーションが、hideMessage が完了する前に開始された場合、基本的に hideMessage アニメーションを逆にすることです。

それが理にかなっていることを願っています。

4

1 に答える 1

2

アニメーション B を開始する前に、アニメーション A が完了していることを確認する必要があります。

 $('#message').stop(true,true).show();

これは .stop( [clearQueue ] [, jumpToEnd ] ) と言っています。これがドキュメントです。

あなたは近かった！ フィドル

于 2013-03-23T20:21:29.137 に答える