jQueryオブジェクト .slideUp()

表示されているHTML要素を、徐々に小さくして非表示にする。

概要

jQuery オブジェクトの slideUp メソッドはオーバーロードされており、引数が異なる複数のメソッドが存在する。

jQueryObject.slideUp()
jQueryObject.slideUp(duration)
jQueryObject.slideUp(complete)
jQueryObject.slideUp(duration. complete)
jQueryObject.slideUp(options)
duration
要素が非表示になるアニメーションの時間を数値または文字列で指定する。数値で指定する場合は、時間をミリ秒単位で指定する。文字列で指定する場合は、"fast" または "slow" で指定する。 
$("#id1").slideUp(1000);
$("#id2").slideUp("slow");
complete
アニメーションが完了したときに呼び出される関数を指定する。マッチした要素ごとに1回呼び出される。
options
追加オプションのマップを指定する。 
$("#id3").slideUp({
  duration: 1000
})

使用例

slideUp メソッドの使用例を以下に示す。

HTML

<button id="slideup">Slide up</button>
<button id="show">Show</button>
<img src="/javascript/img/portrait.jpg" id="portrait">

JavaScript

$("#slideup").click(function (){
  $("#portrait").slideUp()
})
$("#show").click(function (){
  $("#portrait").show()
})

実行結果

portrait

参考文献

OpenJS Foundation 2023. .slideUp(). jQuery API Documentation