jQuery スライド
jQueryマニュアルjQueryのslideメソッドは、スライドアニメーションを作ることができます。
slideDown()メソッド
slideDown()メソッドは、指定した要素をスライドダウン（下方向へのスライド）エフェクトとともに表示します。引数にはスライドダウンに要する時間（ミリ秒）を指定できます。
$("#example").slideDown(2000); // 2秒間かけてスライドダウン<button id="slideDownButton">スライドダウン</button>
<div id="slideDownDiv" style="width:80px;height:80px;display:none;background-color:red;"></div>
<script>
$(document).ready(function(){
$("#slideDownButton").click(function(){
$("#slideDownDiv").slideDown();
});
});
</script>slideUp()メソッド
slideUp()メソッドは、指定した要素をスライドアップ（上方向へのスライド）エフェクトとともに非表示にします。引数にはスライドアップに要する時間（ミリ秒）を指定できます。
$("#example").slideUp(2000); // 2秒間かけてスライドアップ<button id="slideUpButton">スライドアップ</button>
<div id="slideUpDiv" style="width:80px;height:80px;background-color:green;"></div>
<script>
$(document).ready(function(){
$("#slideUpButton").click(function(){
$("#slideUpDiv").slideUp();
});
});
</script>slideToggle()メソッド
slideToggle()メソッドは、指定した要素の表示状態をスライドダウンとスライドアップで切り替えます。引数にはスライドの時間（ミリ秒）を指定できます。
$("#example").slideToggle(2000); // 2秒間かけて表示状態を切り替え<button id="slideUpButton">スライドアップ</button>
<div id="slideUpDiv" style="width:80px;height:80px;background-color:green;"></div>
<script>
$(document).ready(function(){
$("#slideUpButton").click(function(){
$("#slideUpDiv").slideUp();
});
});
</script>
コメント