jQuery スライド


jQuery Effect - Sliding

jQuery のスライディング メソッドは、要素を上下にスライドさせることができます。

時間はお金に等しいので、迅速でわかりやすい学習コンテンツを提供します。

ここでは、分かりやすく便利なモードを通じて必要な知識を得ることができます。

Example

jQuery slideDown()
は、jQuery slideDown() メソッドを示します。

jQuery slideUp()
jQuery slideUp() メソッドを示します。

jQuery slideToggle()
jQuery slideToggle() メソッドを示します。

jQueryスライドメソッド

jQueryを使用すると、要素にスライド効果を作成できます。

jQueryには以下のスライドメソッドがあります:

  • slideDown()
  • slideUp()
  • slideToggle()

jQuery slideDown()メソッド

jQuery slideDown()メソッドは要素を下にスライドさせるために使用されます。

構文:

$(selector).slideDown(speed,callback);

オプションのspeedパラメータは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメータは、スライディング完了後に実行される関数の名前です。

次の例は、slideDown() メソッドを示しています:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</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://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
}
</style>
</head>
<body>
 
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

runインスタンス»「「実行インスタンス」ボタンをオンラインで表示して表示します。 jQueryの slideToggle() メソッドで、 slideDown() メソッドと slideUp() メソッドを切り替えます。
要素が下にスライドする場合、slideToggle() は要素を上にスライドさせます。
要素が上にスライドする場合、slideToggle() は要素を下にスライドします。

$(
selector
).slideToggle(

speed,callback

);

オプションの速度パラメーターは、エフェクトの持続時間を指定します。 「slow」、「fast」、またはミリ秒の値を取ることができます。

オプションのコールバックパラメータは、スライディングの完了後に実行される関数の名前です。

次の例は、slideToggle() メソッドを示しています:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>

</body>
</html>

インスタンスの実行 »

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします