slideUpとは
- ここで説明する slideUp とは次の語句からなるjQueryのメソッドです。
- slide
- 読み: スライド
意味: 滑る - up
- 読み: アップ
意味: 上に、上方へ
slideUpメソッドの概要
このメソッドは、呼び出し元の要素を非表示にします。
引数に数値でミリ秒を設定することで、非表示が完了するまでの時間を指定することができます。 時間を指定することで、要素はアニメーションしながら非表示に遷移します。
構文
サンプルを見る前に構文を確認しておきます。
$(Selector).slideUp(speed);サンプルコードと実行結果
ここではdiv要素を slideUpメソッドを使って隠してみます。最初から隠してしまっては違いが分かりませんのでボタンをクリックすると処理を行うようにしています。
サンプルコード: CSS
<style>
div{
color: ##white;
background-color: ##deeppink;
height: 100px;
text-align: center;
width: 100px;
}
</style>
サンプルコード: 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">slideUp (隠す)</button>
<script>...</script>
</body>
- 06: div (ここでは、この要素をslideUpメソッドを使って隠します。)
- 07: button (ボタンです。クリックすると、scriptの 02 ~ 04行のコードを実行します。)
サンプルコード: script
<script>
$("#idButton").click(function(){
$("div").slideUp(1000);
});
</script>
- 03: slideUp(1000) (呼び出し元の要素を1000ミリ秒 (1秒) かけて隠します。)
Element