要素が横からスライドで表示されるwidth: ‘toggle’について解説します。
.animate()に{ width: ‘toggle’ }を設定すれば指定した要素が左横からスライドして表示されます。
ページ内リンク
サンプル
jQueryの.animate({width: ‘toggle’})を利用したコード
jQuery
<div><script type="text/javascript">
jQuery(function(){
jQuery('.box1').hover(function(){
jQuery('.haikei').stop(true).animate( { width: 'toggle' }, 'slow' );
});
});
</script></div>
jQueryの解説
jQuery(‘.box1’).hover(function(){
は.box1の要素に、.hoverはマウスを載せたらjQueryが実行され、マウスが離れたら元に戻る、というものです。
jQuery(‘.haikei’).stop(true).animate( { width: ‘toggle’ }, ‘slow’ );
は.haikeiを指定した要素に、{ width: ‘toggle’ }は横からスライドして現れて、マウスが離れたらスライドしながら消えるという事です。
.animateはアニメーションが、‘slow’はゆっくりと起こるという事です。
.stop(true)はマウスを載せて横からスライドで表れている途中でマウスが離れた時、そこでアニメーションを途中終了させ元に戻るという事です。
.hover()
jQueryのマウスイベントで、マウスが要素の上に乗ったらjQueryが始まります。
.mouseover()と.mouseout()を.hover()一つで行うようなイメージです。
.stop(true)
.stop(true)はjQueryのエフェクトでホバーアニメーションを途中で止めます。
これがないとアニメーションが全部終了しなければ止まらないので、マウスが行ったり来たりするとその回数だけアニメーションを繰り返してしまいます。
.stop(false)を設定すると途中で止めずホバーした回数だけアニメーションされます。
HTML
<div class="haikei"></div> <div class="box1">ここにマウスを置くと背景色が出ます。</div>
CSS
.haikei {
display: none;
width: 320px;
height: 25px;
background: #ccc;
margin-bottom: -25px;
}
.show.hideでは横にはならない
.show()と.hide()でもスライドして出し入れできるのですが、斜め上からのスライドになり、横からのスライドにはなりません。
基本は左の上からのスライドになります。
width:’toggle’という書き方
width:’toggle’という書き方はあまり見かけません。
左から横へのスライドになります。
widthはCSSで「横幅」で利用されます。
他にも似たような書き方があります。
.animate({height: ‘toggle’})
.animate({height: ‘toggle’})は.slideToggle()と同じ動作をします。
.animate({height: ‘hide’})
.animate({height: ‘hide’})は.slideUpと同じ動きです。
.animate({height: ‘show’})
.animate({height: ‘show’})は.slideDownと同じ動作です。
まとめ
今回は.animate({width:’toggle’})を要素に背景色をつける目的で使用しましたが、よく使われているのはメニューが左端から出てくるというものです。
スライドして要素を出すというのはいろいろな使われ方で利用されているので、.animate({width:’toggle’})も必要になると思います。
