jQuery開閉させるアニメーション！
今回は、jQueryで開閉させるアニメーションの作り方、スライド系のアニメーションについて記載していきます。
jQueryでアニメーション、「要素をスライドさせて閉じるはどうするの？」や「要素をスライドさせながら開くには？」などの初心者向けの疑問にお答えする形で、開閉させるアニメーションをサンプルコードと共に記載していこうと思います。
という事で、それでは今回はッ、
- ・縦にスライドしながら要素を閉じる:slideUp()メソッド
- ・縦にスライドしながら要素を開く:slideDown()メソッド
上記について記載していこうと思います…。
縦にスライドしながら要素を閉じる:slideUp()メソッド
前回記載したフェード系のエフェクトとは異なり、slideUp()メソッドは要素を上にスライドさせながら、最後には非表示にするメソッドになります。開いているものを閉じる、と記載したほうが分かりやすいかもしれませんが、どんな動きをするのかは、サンプルコードを記載しますので、ご確認ください。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).slideUp(“slow”);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<p>slideUp()メソッドは、要素の高さを変更しながらアニメーションするメソッドです！</p>
・・省略・・
</body>
</html>
- HTML
- CSS
- jQuery
slideUp()メソッドは、要素の高さを変更しながらアニメーションするメソッドです！
↓↓↓ 600ミリ秒（0.6秒）かけて要素が上にスライドしながら非表示になります ↓↓↓
slideUp()メソッドは、要素の高さを変更しながらアニメーションするメソッドです！
記述方法は、パラメータにスピードを指定してあがるだけです。空の場合は400ミリ秒になるのは、他のメソッドと同じです。
slideUp( “slow” )←——–0.6秒（600ミリ秒）
slideUp()←——–0.4秒（400ミリ秒）
縦にスライドしながら要素を開く:slideDown()メソッド
slideDown()メソッドは、slideUp()メソッドの逆で、要素を開くメソッドになります。
初めにCSSで開く要素をdisplay:noneにしておく必要があるので、注意が必要です。
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>Sample html</title>
<style>
#list {
display: none;
}
</style>
<script src=”js/jquery.js”></script>
<script>
$(function(){
$(“#list”).slideDown(“slow”);
});
</script>
</head>
<body>
・・省略・・
<ul id=”list”>
<li>HTML</li>
<li>CSS</li>
<li>jQuery</li>
</ul>
<p>slideDown()メソッドは、要素の高さを変更しながらアニメーションするメソッドです！</p>
・・省略・・
</body>
</html>
slideDown()メソッドは、要素の高さを変更しながらアニメーションするメソッドです！
↓↓↓ 600ミリ秒（0.6秒）かけて要素が下にスライドしながら表示になります ↓↓↓
- HTML
- CSS
- jQuery
slideDown()メソッドは、要素の高さを変更しながらアニメーションするメソッドです！
記述方法も、slideUp()と基本的に同じになります。
slideUp()、slideDown()メソッドは、基本的には要素の高さを変更しながらアニメーションを作っていきます。なので、CSS的にheightを指定することができる、ブロックレベル要素に対して使うことをオススメします。
という事で今回は、jQuery開閉させるアニメーション！slideUp、slideDownにつきまして、サンプルコードと共に記載いたしました。
前回のfade系メソッドと同じような記載方法なので、比較的簡単だったかと思います。しかし、これらは基礎中の基礎になりますので、間違えないようにしっかりと理解を深め、覚えることをオススメします。
複雑なjQueryのコードも、実際は、上記のような単純なコードが複数重なり合い、複雑に記載されることとなります。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
