jQueryのanimate()完了後に実行したい処理がある場合の記述方法

animate完了後に実行したい

jQueryのanimateを使うことでスライドショーなどのアニメーションを作れますが、アニメーション完了後に処理をしたい場合があります。

その場合はこうします。

PR

まずはサンプル

画面をクリックすると、画像が右に移動します。
移動し終わったあとで画像サイズが変化します。

もう一度確認する場合は、再読み込みしてください。

WEB-LABO

今回の処理
 画面をクリックされたら、画像を右に300px移動します。
 移動が完了したら、画像の横幅を100pxに変更します。

animate()の処理
 margin-left:300pxで右にずらします。

animate()完了後の処理
 画像の横幅を100pxにします。

jQueryで制御するため、imgタグに「weblabo」というクラス名をつけています。

 

書式

余分な部分を削除したコードが次のようになります。

animateに関しては、他のオプションもありますので、色々試してみてください。

PR

関連記事