animateのwidthとtoggleで横スライドで要素を出現させるjQuery

要素が横からスライドで表示されるwidth: ‘toggle’について解説します。
.animate()に{ width: ‘toggle’ }を設定すれば指定した要素が左横からスライドして表示されます。

サンプル

ここにマウスを置くと背景色が出ます。

jQueryの.animate({width: ‘toggle’})を利用したコード

jQuery

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

CSS

.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’})も必要になると思います。

参考URL

サイドからパネルがスライドインする
横にスライドさせる
jQuery の animate の横方向の出現や隠す動作

コメントを残す