jQuery の animate で、アニメーションのステップごとに関数を実行

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

アニメーションの各ステップの後に関数を実行するには、jQuery の animate( properties, options ) メソッドの2つ目の引数のoptions（オプション）内で、 step （ステップ）に、実行したい関数を指定することで可能。

実装例（サンプル）

実装例（サンプル）の動作について

「step」ボタンをクリックすると、オレンジ色のブロックが、不透明度100%から不透明度25%へアニメーション変化する。アニメーション中、「step」ボタンの右横に、■ が出現し増えていく。アニメーションが完了すると、■ は全て消える。

実装例（サンプル）のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-api-animate-step' ) . click( function() {
        jQuery( '#jquery-api-animate' )
            . css(
                {
                    opacity: 1,
                }
            )
            . animate(
                {
                    opacity: 0.25,
                },
                {
                    duration: 1000,
                    easing: 'linear',
                    step : function(){
                        jQuery( '#jquery-api-animate-step-now' ) . append( '■' )
                    },
                    complete: function() {
                        jQuery( '#jquery-api-animate-step-now' ) . empty()
                    }
                }
            );
    } );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-api-animate {
    background-color: orange;
    height: 200px;
    width: 200px;
}
#jquery-api-animate-step-now {
    font-size: 5px;
}
-->
</style>

HTML

<p>
    <button id="jquery-api-animate-step">step</button><span id="jquery-api-animate-step-now"></span>
</p>
<div id="jquery-api-animate"></div>

スポンサード リンク

カテゴリー: animate, API, JavaScript, jQuery, アニメーション, エフェクト, カスタム パーマリンク