jQuery の animate による連続アニメーション動作

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

連続アニメーション動作は、animate( properties, [duration], [easing], [complete] ) メソッドの4つ目の引数の complete で、次のアニメーション動作を指定するか、animate( properties, options ) メソッドの 2つ目の引数である options 内の complete に、次のアニメーション動作を指定することで可能。

実装例

実装例の動作について

赤いブロック部分をクリックすると、右側のオレンジや黄色の3つのブロックを、オレンジから順番に折りたたむ。もう一度、赤いブロック部分をクリックすると、オレンジや黄色の3つのブロックを、オレンジから順番に出現させる。

実装例のソースコード

読み込み

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

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

JavaScript

<script type="text/javascript">
<!--
$( function() {
    $( '#animate-complete-title' ) . click( function() {
        $( "#animate-complete-block-1" ) . animate(
            {
                width: 'toggle',
            },
            {
                duration: 1000,
                easing: 'easeOutBounce',
                complete: function(){
                    $( "#animate-complete-block-2" ) . animate(
                        {
                            width: 'toggle',
                        },
                        {
                            duration: 1000,
                            easing: 'easeOutBounce',
                            complete: function(){
                                $( "#animate-complete-block-3" ) . animate(
                                    {
                                        width: 'toggle',
                                    },
                                    {
                                        duration: 1000,
                                        easing: 'easeOutBounce',
                                    }
                                );
                            },
                        }
                    );
                },
            }
        );
    } );
} );
// -->
</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: 100px;
}
div#animate-complete-block-2 {
    float: left;
    background-color: #ff9900;
    height: 50px;
    width: 100px;
}
div#animate-complete-block-3 {
    float: left;
    background-color: #ffcc00;
    height: 50px;
    width: 100px;
}
-->
</style>

HTML

<div id="animate-complete-title"></div>
<div id="animate-complete-block-1"></div>
<div id="animate-complete-block-2"></div>
<div id="animate-complete-block-3"></div>
<div style="clear: both;"></div>

スポンサード リンク

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