jQuery: slideUp()メソッド

slideUp()メソッドは、指定した要素を下から上へ徐々にスライドさせながら非表示にします。 slideDown()メソッドと逆の機能を持ち、どちらもスライドアニメーションのような効果を得られます。

特にスライドパネルのような開閉式コンテンツをつくる際に便利なメソッドです。

slideUp() 書式


$(セレクタ).slideUp(スピード,コールバック関数);

スピードは'slow'、'normal'、'fast'、またはミリ秒単位で指定します。1000と指定すると1秒になります。 省略した場合は'normal'です。具体的な速さは'slow'が0.6秒、'normal'が0.4秒、'fast'が0.2秒です。

コールバック関数はslideUp()メソッドが完了後に実行する関数です。

slideUp() コード例


// slow
$('dd').slideUp('slow');

// 1秒
$('dd').slideUp(1000);

// コールバック関数あり
$('dd').slideUp('slow', function(){
    // 処理を記述
});

動作

背景色が青色の部分をクリックすると、コンテンツ部分が徐々にスライドアップします。 スライドダウンはしません。コードも下に掲載しています。

スピード=1000
コンテンツ部分です。
コンテンツ部分です。
コンテンツ部分です。
スピード='slow'
コンテンツ部分です。
コンテンツ部分です。
コンテンツ部分です。

HTML


<dl>
    <dt id="dt1">スピード=1000</dt>
    <dd>コンテンツ部分です。<br>コンテンツ部分です。<br>コンテンツ部分です。</dd>
    <dt id="dt2">スピード='slow'</dt>
    <dd>コンテンツ部分です。<br>コンテンツ部分です。<br>コンテンツ部分です。</dd>
</dl>

CSS


dl {
    width: 300px;
}
dt {
    background: navy;
    color: white;
    font-weight: bold;
    border: 1px solid white;
    cursor: pointer;
}
dd {
    border: 1px solid silver;
}

JavaScript


$('#dt1').on('click', function(){
    $('#dt1+dd').slideUp(1000);
});
$('#dt2').on('click', function(){
    $('#dt2+dd').slideUp('slow');
});
jQuery入門