jQueryで要素を右から左、上から下などにスライド表示【animate】

タイトルの通り

jQueryのanimateメソッドで要素をスライド表示させるときに、

  • 左から右にスライド
  • 右から左にスライド
  • 上から下にスライド
  • 下から上にスライド

この4つのやり方をまとめてみました。

ただし 右から左、下から上、この2つは公式でサポートされてません。

でもコードに少し工夫すれば、意外と簡単にできます。

1.左から右に要素をスライド表示

まずはオーソドックスな左から右へのスライド

これはanimateメソッドに {width: 'toggle'}  を渡せばOK

もちろんCSSに toggle  なんて値はありません。
要素をアニメーション表示する時に使えるjQuery専用のプロパティ値です。

 

その具体的なコード例は以下の通り

▼ まずはHTML例

▼ 左から右にスライドさせるコード

ちなみに上コードの stop(true)  という部分。

こうすることで、アニメ途中でクリックされたらアニメーションを中止させることが可能です。

 

このコードを実際の動かした様子がコチラの動画

jQueryで要素を左から右にスライド表示したときの様子

スライドしているのは背景が青色の部分

たった数行でこんな複雑な処理ができるからjQueryって便利ですね。

2.右から左に要素をスライド表示

次は左から右への要素スライド

これが案外一筋縄でいかないので、次みたいな工夫が必要です。

  • 要素幅によって処理を変える
  • 左マージンの調整も必要

これについては便利なメソッドもないから、自前の実装しないいとダメでした。

 

そのために書いてみたのが次みたいなコードです。

▼ まずはHTML例

▼ この要素を右から左にスライドするコード

現在幅から (elemSlide.css('width') == '0px') ? '300px' : '0'  と幅切り替えするのがポイント

あと左マージンが 0 のときは 要素幅いっぱい、そうでないなら 0 にするのも重要です。

 

このコードで要素をスライドさせたときの様子が次動画

jQueryを使って要素を右から左にスライド表示させたときの様子

一応、右から左にスライド表示されてます。

かなり強引だけど やってできないことはないです。

3.上から下に要素をスライド表示

次は要素を上から下にスライドさせるやり方

これは animate メソッドに {height: 'toggle'}  を渡してやればOK

その他は左から右に要素スライドするのと変わりません。

 

実際のHTML例とコード例はコチラ

▼ まずはHTML例

▼ 要素を上から下にスライドするコード

 

要素が上から下にスライドしてる様子がつぎの動画

jQueryを使って要素を上から下にスライド表示したときの様子

これはいい例が思いつかないけど、色々なシーンで使えそう

4.下から上に要素をスライド表示

最後は下から上に要素スライドさせるやり方

これも中々一筋縄でいかないので、次みたいな工夫が必要です。

  • 要素高さによって処理を変える
  • 上側マージンの調整も必要

右から左にスライドするコードを縦用に改造すればいけます。

 

そのHTML例とコード例は 次みたいな感じです。

▼ まずはHTML例

▼ この要素を下から上にスライドさせるコード

 

要素を下から上にスライドさせたのがコチラの動画

jQueryを使って要素を上から下にスライドスライド表示したときの様子

こういう風にjQueryでサポートされてなくても、工夫次第で何ともなります。

ここまでのまとめ

ということで、最後にスライド方法のまとめ

ということで、jQueryで要素をスライドさせる色々な方法でした。ではでは ($・・)/~~~

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください