jQuery 「エフェクト」スライド効果
.slideUp()は、要素の高さを元の高さから0まで徐々に変化させます。逆に.slideDown()は、要素の高さを0から元の高さまで徐々に変化させます。.slideToggle()は、要素が表示されているかどうかによって.slideUP()または.slideDown()のいずれかの効果を実行します。例えば、対象要素がスライドアップしている状態であれば.slideDown()、スライドダウンしている状態であれば.slideUp()を実行する動作を付与可能です。これらの関数の第1引数は、アニメーション効果にかける時間です。「fast（速く）」「slow（遅く）」といった文字列での指定の他、ミリ秒単位の数値でも指定できます。なお、fastは200ミリ秒、slowは600ミリ秒を指定したのと同じになります。.fadeIn()及び.fadeOut()では、この値は省略可能で、省略した場合400ミリ秒が設定されたものとして実行されます。最後の引数は、アニメーションが完了したときに実行されるコールバック関数です。
書式
$("対象要素").slideUp([効果時間],[コールバック]);
$("対象要素").slideDown([効果時間],[コールバック]);
$("対象要素").slideToggle([効果時間],[コールバック]);$('div').slideUp('fast', function(){
alert('スライドアップしました');
});
$('div').slideDown('slow', function(){
alert('スライドダウンしました');
});
$('div').slideToggle(400, function(){
alert('スライドトグルしました');
});サンプル
スライド効果。mainクラスのボタンをクリックするとsubクラス内の「menu1」「menu2」が.slideToggle()メソッドによってスライドダウン、スライドアップします。「menu1」「menu2」は.hide()メソッドを用いて、ページを表示したときは非表示の状態にしています。
<body>
<button class="main" href="#">main menu</button>
<ul class="sub">
<li>menu1</li>
<li>menu2</li>
</ul>
<script>
$(document).ready(function(){
//subクラスの要素を隠す
$(".sub").hide();
//mainクラスの要素をクリックしたらsubクラスの要素をslideToggleさせる
$(".main").on('click' ,function(){
$(".sub").slideToggle(400);
})
});
</script>
</body>
