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

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

指定方法

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

toggle

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

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

show

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

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

hide

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

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

応用

opacity と併用することで、透明にしながら折りたたむことも可能。
赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動き、さらに、透明になりながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動き不透明になりながら出現。速度( duration )は、slow を指定してある。

animate( { height: 'toggle', opacity: 'toggle' }, 'slow' )

スポンサード リンク

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