jQuery: slideDown()メソッド

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

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

slideDown() 書式


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

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

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

slideDown() コード例


// fast
$('dd').slideDown('fast');

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

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

動作

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

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

HTML


<dl>
    <dt id="dt1">スピード=1000</dt>
    <dd>コンテンツ部分です。<br>コンテンツ部分です。<br>コンテンツ部分です。</dd>
    <dt id="dt2">スピード='normal'</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;
    display: none;
}

JavaScript


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