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>
<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>