jQuery スライド
jQueryのスライディングメソッドは要素を上下にスライドさせることができます。
jQueryのスライディングメソッド
jQueryを使用すると、要素にスライド効果を作成できます。
jQuery には次のスライディング メソッドがあります:
slideDown()
slideUp()
slideToggle()
jQuery slideDown() メソッド
構文:
$(selector).slideDown(speed,callback);オプションのspeedパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。 オプションのコールバックパラメータは、スライディングの完了後に実行される関数の名前です。 次の例は、slideDown() メソッドを示しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideDown("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="div1">点我滑下面板</div>
<div id="div2">你好啊，美女/帅哥</div>
</body>
</html>実行して試してみるjQuery slideUp() メソッド
jQuery slideUp() メソッドは、要素を上にスライドさせるために使用されます。構文:
$(selector).slideUp(speed,callback);オプションのspeedパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。 オプションのコールバックパラメータは、スライディングの完了後に実行される関数の名前です。 次の例は、slideUp() メソッドを示しています:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideUp("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
}
</style>
</head>
<body>
<div id="div1">点我拉起面板</div>
<div id="div2">Hello world!</div>
</body>
</html>実行して試してくださいjQueryのslideToggle()メソッド
jQueryのslideToggle()メソッドは、slideDown()メソッドとslideUp()メソッドを切り替えることができます。
要素が下にスライドする場合、slideToggle() は要素を上にスライドさせます。
要素が上にスライドする場合、slideToggle() は要素を下にスライドします。
構文
$(selector).slideToggle(speed,callback);
オプションのspeedパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。
オプションのコールバックパラメータは、スライディングの完了後に実行される関数の名前です。
次の例は、slideToggle() メソッドを示しています:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#div1").click(function(){
$("#div2").slideToggle("slow");
});
});
</script>
<style type="text/css">
#div2,#div1
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#div2
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<div id="div1">点我，显示或隐藏面板。</div>
<div id="div2">如果只是相遇，而不能相守，人生最好不相见</div>
</body>
</html>実行して試してください
