slideDownとは
- ここで説明する slideDown とは次の語句からなるjQueryのメソッドです。
- slide
- 読み: スライド
意味: 滑る - down
- 読み: ダウン
意味: 下に、下方へ
slideDownメソッドの概要
このメソッドは、非表示状態の呼び出し元の要素を表示します。
引数に数値でミリ秒を設定することで、表示が完了するまでの時間を指定することができます。 時間を指定することで、要素はアニメーションしながら表示状態に遷移します。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).slideDown(speed);サンプルコードと実行結果
ここでは非表示状態のdiv要素を slideDownメソッドを使って表示してみます。予め div要素はCSSを使って非表示に設定されています。ボタンをクリックすると表示処理を行うようにしています。
サンプルコード: CSS
<style>
div{
display: none;
color: ##white;
background-color: ##deeppink;
height: 100px;
text-align: center;
width: 100px;
}
</style>
- 03: display: none; (この要素を非表示に設定します。)
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div>Element</div>
<button id="idButton">slideDown (表す)</button>
<script>...</script>
</body>
- 06: div (ここでは、この要素をslideDownメソッドを使って表示します。)
- 07: button (ボタンです。クリックすると、scriptの 02 ~ 04行のコードを実行します。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("div").slideDown(1000);
});
</script>
- 03: slideDown(1000) (呼び出し元の要素を1000ミリ秒 (1秒) かけて表示ます。)
Element