JavascriptやjQueryを記述していると、
最初のアニメーションが完了してから、jsでcssの変更を加えたい場面に遭遇します。
スライドアニメーションが完了するまでdisplay:none;にしたくないなどです。
■.when()には先に終わらせたい処理を記述
.when()に先に完了させたい処理を記述します。
要素がアニメーションで横に移動を完了するまでフェードアウトさせたくない場合、
先にアニメーションを記述します。
■.done()に後に実行したい処理を記述
アニメーションなどが終わった後に動作させたい動作を記述します。
フェードアウトやjsでcssの変更を加えるなど
■.when() と.done()をメソッドチェーンでも繋げて最初と後の処理を決定する
これら2つをメソッドチェーンで繋げて、処理を順番に実行させます。
1 2 3 4 5 6 7 8 9 10 11 12 |
<script type="text/javascript"> $(function() { $('#Button').on('click', function(){ $.when( //ここに先に終わらせたい処理 ).done(function(){ //後に実行したい処理 }); }); }); </script> |
コメント