タイトルの通り
jQueryのanimateメソッドで要素をスライド表示させるときに、
- 左から右にスライド
- 右から左にスライド
- 上から下にスライド
- 下から上にスライド
この４つのやり方をまとめてみました。
ただし 右から左、下から上、この２つは公式でサポートされてません。
でもコードに少し工夫すれば、意外と簡単にできます。
１．左から右に要素をスライド表示
まずはオーソドックスな左から右へのスライド
これはanimateメソッドに {width: 'toggle'} を渡せばOK
もちろんCSSに toggle なんて値はありません。
要素をアニメーション表示する時に使えるjQuery専用のプロパティ値です。
その具体的なコード例は以下の通り
▼ まずはHTML例
1 2 3 4 5 6 7 | <div style="width: 300px; height: 72px; position: relative;"> <div id="leftToRight" class="bg-primary" style="height: 100%; width: 100%; top: 0; left: 0; position: absolute;"> </div> <div class="toggle ltor" style=" position: absolute; top: 50%; left: 50%;transform: translateX(-50%) translateY(-50%);"> 左から右にスライド </div> </div> |
▼ 左から右にスライドさせるコード
1 2 3 | $('.toggle.ltor').on('click', function(){ $('#leftToRight').stop(true).animate({'width': 'toggle'}); }); |
ちなみに上コードの stop(true) という部分。
こうすることで、アニメ途中でクリックされたらアニメーションを中止させることが可能です。
このコードを実際の動かした様子がコチラの動画
スライドしているのは背景が青色の部分
たった数行でこんな複雑な処理ができるからjQueryって便利ですね。
２．右から左に要素をスライド表示
次は左から右への要素スライド
これが案外一筋縄でいかないので、次みたいな工夫が必要です。
- 要素幅によって処理を変える
- 左マージンの調整も必要
これについては便利なメソッドもないから、自前の実装しないいとダメでした。
そのために書いてみたのが次みたいなコードです。
▼ まずはHTML例
1 2 3 4 5 6 7 | <div style="width: 300px; height: 72px; position: relative; "> <div id="rightToLeft" class="bg-primary" style="width: 100%; height: 100%; top: 0; left: 0; position: absolute;"> </div> <div class="toggle rtol" style="position: absolute; top: 50%; left: 50%;transform: translateX(-50%) translateY(-50%);"> 右から左にスライド </div> </div> |
▼ この要素を右から左にスライドするコード
1 2 3 4 5 6 7 8 | $('.toggle.rtol').on('click', function(){ var elemSlide = $('#rightToLeft'); elemSlide.stop(true).animate({ 'width': (elemSlide.css('width') == '0px') ? '300px' : '0', marginLeft: parseInt(elemSlide.css('marginLeft'),10) == 0 ? elemSlide.outerWidth() : 0 }); }); |
現在幅から (elemSlide.css('width') == '0px') ? '300px' : '0' と幅切り替えするのがポイント
あと左マージンが 0 のときは 要素幅いっぱい、そうでないなら 0 にするのも重要です。
このコードで要素をスライドさせたときの様子が次動画
一応、右から左にスライド表示されてます。
かなり強引だけど やってできないことはないです。
３．上から下に要素をスライド表示
次は要素を上から下にスライドさせるやり方
これは animate メソッドに {height: 'toggle'} を渡してやればＯＫ
その他は左から右に要素スライドするのと変わりません。
実際のHTML例とコード例はコチラ
▼ まずはHTML例
1 2 3 4 5 6 7 | <div style="width: 300px; height: 72px; position: relative;"> <div id="topToBottom" class="bg-primary" style="height: calc(24px * 3); width: 100%; top: 0; left: 0; position: absolute;"> </div> <div class="toggle ttob" style="position: absolute; top: 50%; left: 50%;transform: translateX(-50%) translateY(-50%);"> 上から下にスライド </div> </div> |
▼ 要素を上から下にスライドするコード
1 2 3 | $('.toggle.ttob').on('click', function(){ $('#topToBottom').stop(true).animate({'height': 'toggle'}); }); |
要素が上から下にスライドしてる様子がつぎの動画
これはいい例が思いつかないけど、色々なシーンで使えそう
４．下から上に要素をスライド表示
最後は下から上に要素スライドさせるやり方
これも中々一筋縄でいかないので、次みたいな工夫が必要です。
- 要素高さによって処理を変える
- 上側マージンの調整も必要
右から左にスライドするコードを縦用に改造すればいけます。
そのHTML例とコード例は 次みたいな感じです。
▼ まずはHTML例
1 2 3 4 5 6 7 | <div style="width: 300px; height: 72px; position: relative;"> <div id="bottomToTop" class="bg-primary" style="height: calc(24px * 3); width: 100%; top: 0; left: 0; position: absolute;"> </div> <div class="toggle btot" style="position: absolute; top: 50%; left: 50%;transform: translateX(-50%) translateY(-50%);"> 下から上にスライド </div> </div> |
▼ この要素を下から上にスライドさせるコード
1 2 3 4 | $('.toggle.btot').on('click', function(){ var elemSlide = $('#bottomToTop'); elemSlide.stop(true).animate({'height': (elemSlide.css('height') == '0px') ? '100%' : '0', marginTop: parseInt(elemSlide.css('marginTop'),10) == 0 ? elemSlide.outerHeight() : 0 }); }); |
要素を下から上にスライドさせたのがコチラの動画
こういう風にjQueryでサポートされてなくても、工夫次第で何ともなります。
ここまでのまとめ
ということで、最後にスライド方法のまとめ
ということで、jQueryで要素をスライドさせる色々な方法でした。ではでは ($・・)/~~~
