jQuery の animate による同時多発アニメーション

同時多発アニメーションは、jQuery の animate( properties, options ) メソッドの2つ目の引数のoptions(オプション)内で、 queue(キュー)に false を指定することで可能。

  • queue に false を指定すると、複数のアニメーションを、同時に実行する。
  • queue に true を指定すると、複数のアニメーションを、順番に実行する。

実装例(サンプル)

実装例(サンプル)の動作について

  • 「queue: false」ボタンをクリックすると、オレンジ色のブロックが、幅と高さが同時に、50pxから200pxへアニメーション変化する。
  • 「queue: true」ボタンをクリックすると、オレンジ色のブロックの幅が50pxから200pxへアニメーション変化し、次に、高さが50pxから200pxへアニメーション変化する。

実装例(サンプル)のソースコード

JavaScript

<script type="text/javascript">
<!--
jQuery( function() {
    jQuery( '#jquery-api-animate-queue-false' ) . click(    function() {
        jQuery( '#jquery-api-animate' )
            . css(
                {
                    width: 50,
                    height: 50,
                }
            )
            . animate(
                {
                    width: 200,
                },
                {
                    duration: 'slow',
                    easing: 'swing',
                    queue: false,
                }
            )
            . animate(
                {
                    height: 200,
                },
                {
                    duration: 'slow',
                    queue: false,
                }
            );
    } );
    jQuery( '#jquery-api-animate-queue-true' ) . click( function() {
        jQuery( '#jquery-api-animate' )
            . css(
                {
                    width: 50,
                    height: 50,
                }
            )
            . animate(
                {
                    width: 200,
                },
                {
                    duration: 'slow',
                    easing: 'swing',
                    queue: true,
                }
            )
            . animate(
                {
                    height: 200,
                },
                {
                    duration: 'slow',
                    queue: true,
                }
            );
    } );
} );
// -->
</script>

CSS

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

HTML

<p>
    <button id="jquery-api-animate-queue-false">queue: false</button>
    <button id="jquery-api-animate-queue-true">queue: true</button>
</p>
<div id="jquery-api-animate"></div>

スポンサード リンク

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