jQuery の animate の横方向の出現や隠す動作

jQuery の animate の横方向の出現や隠す動作は、width に、show、hide、toggle などを指定することで可能。

指定方法

animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の width: *** に指定する。

toggle

toggle を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、左方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、右方向へ動きながら出現。速度( duration )は、slow を指定してある。

animate( { width: 'toggle' }, 'slow' )

show

show を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、右方向へ動きながら出現。速度( duration )は、slow を指定してある。
出現させるブロックを、CSS で、非表示(display: none;)にしておき、jQuery の animate でそれを出現させる。

animate( { width: 'show' }, 'slow' )

hide

hide を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、左方向へ動きながら消える。速度( duration )は、slow を指定してある。

animate( { width: 'hide' }, 'slow' )

応用

jQuery Easing Pluginと併用することで、動き方を色々変更できる。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
<!--
$( function() {
    $( '#animate-4-title' ) . click( function() {
        $( "#animate-4-block" ) . animate(
            {
                width: 'toggle',
            },
            {
                duration: 2000,
                easing: 'easeOutBounce',
            }
        );
    } );
} );
// -->
</script>

スポンサード リンク

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