jQuery の animate のアニメーション終了後に関数を実行

投稿日: 2011年5月9日 作成者: alphasis

jQuery の animate のアニメーション終了後の関数の実行は、animate の引数の complete に、アニメーション終了後に実行したい関数を指定することで可能。

animate の complete 指定方法

jQuery の animate のアニメーション終了後に関数を実行する方法は、2種類ある。

animate( properties, [ duration ], [ easing ], [ complete ] )

この場合、animate の4つ目の引数である [ complete ] に、アニメーション終了後に実行したい関数を指定。

例

animate( { width: 'toggle',}, 'slow', 'swing', アニメーション終了後に実行したい関数 )

animate( properties, options )

この場合、animate の2つ目の引数である options 内の complete: *** に、アニメーション終了後に実行したい関数を指定。

例

animate( { width: 'toggle',}, { complete: アニメーション終了後に実行したい関数 } )

サンプル

表示しました。

サンプルの動作について

  1. 赤いブロック部分をクリックすると、右側にオレンジ色のブロックが現れる。
  2. オレンジ色のブロックが完全に出現すると、オレンジ色のブロックの右側に、「表示しました。」と表示される。
  3. もう一度、赤いブロック部分をクリックすると、オレンジ色のブロックが左に動きながら消える。
  4. オレンジ色のブロックが完全に消えると、「表示しました。」の文字も消える。

サンプルのソースコード

読み込み

パスは、アップロードした場所を指定する。

<script type="text/javascript" src="jquery-1.6.2.js"></script>

JavaScript

<script type="text/javascript">
<!--
$( function() {
    $( '#animate-complete-title' ) . click( function() {
        $( '#animate-complete-block-1' ) . animate(
            {
                width: 'toggle',
            },
            {
                duration: 'slow',
                easing: 'swing',
                complete: function() {
                    $( '#animate-complete-block-2' ) . animate(
                        {
                            opacity: 'toggle',
                        },
                        {
                            duration: 1000,
                        }
                    );
                },
            }
        );
    } );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
div#animate-complete-title {
    float: left;
    background-color: red;
    height: 50px;
    width: 100px;
    text-align: center;
}
div#animate-complete-block-1 {
    float: left;
    background-color: #ff6600;
    height: 50px;
    width: 200px;
    display: none;
}
div#animate-complete-block-2 {
    float: left;
    padding: 12px;
    text-align: center;
    display: none;
}
-->
</style>

HTML

<div id="animate-complete-title"></div>
<div id="animate-complete-block-1"></div>
<div id="animate-complete-block-2">表示しました。</div>
<div style="clear: both;"></div>

スポンサード リンク

カテゴリー: animate, API, JavaScript, jQuery, アニメーション パーマリンク