このページの本文へ

jQueryによるアニメーションエフェクトの基本

2009年09月17日 10時00分更新

西畑一馬/to-R

  • この記事をはてなブックマークに追加
本文印刷

スライドアニメーションで表示/非表示を切り換えるslideDown()/slideUp()

 slideDown()slideUp()は、セレクターで指定した要素の表示/非表示をスライドアニメーション付きで切り換える命令です。slideDown()は非表示の要素の高さを0から本来の高さに近づけながら表示し、slideUp()は表示状態の要素の高さを少しずつ0に近づけながら非表示にします。


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


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


 サンプル06は、slideDown()slidUp()を使って、「開閉パネル」(Collapsible-Panel)と呼ばれるUI部品を作成したものです。dt要素がクリックされると、css()を使ってdd要素のdisplayプロパティを調べ、displayプロパティの値がblock<の場合はslideUP()dd要素を非表示に、それ以外ならslideDown()dd要素を表示します。条件の指定には、第8回で解説したif文を使っています。

 dd要素のdisplayプロパティがblockの場合でもアニメーション処理中の可能性があるため、セレクターに:not(:animated)を追加し、アニメーション中でない要素にのみslideUp() を適用しています。

サンプル06(CSS部分)


dl{
    width:300px;
    margin:50px auto;
}
dl dt{
    background:#7CADB6;
    cursor:pointer;
}
dl dd{
    border:1px solid #7CADB6;
    height:300px;
    margin:0;
}


サンプル06(スクリプト部分)


$(function(){
    $("dt").click(function(){
        if($("dd").css("display")=="block"){
            $("dd:not(:animated)").slideUp("slow");
        }else{
            $("dd").slideDown("slow");
        }
    })
})


サンプル06(HTML部分)


<dl>
    <dt>スライドして表示状態を切り替える</dt>
    <dd>
            slideDown()とslideUp()、show()やhide()とは違いスライドアニメーションで表示非表示を切り替える命令です。
    </dd>
</dl>


サンプル06(実行結果)

サンプル06
サンプル06
サンプル06の実行画面。要素の高さが変化しながら非表示(表示)になる


スライドアニメーションで表示/非表示を交互に切り換えるslideToggle()

 slideToggle()は、前のページで紹介したtoggle()のスライドアニメーション版です。セレクターで指定した要素が表示されている場合は非表示に、非表示の場合は表示状態にスライドアニメーションで切り換えます。


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


 以下は、サンプル06をslideToggle()を使って書き直したものです。if文による条件分岐がなくなり、すっきりとしたソースコードになりました。

サンプル07(スクリプト部分)


$(function(){
    $("dt").click(function(){
        $("dd:not(:animated)").slideToggle("slow");
    })
})



【CSSワンポイントレッスン】

マウスカーソルを変更するcursorプロパティを覚えよう

 サンプル06のCSSには、「cursor」というプロパティが登場しています。cursorは、マウスカーソルの形状を指定するプロパティです。HTMLでは、a要素にマウスカーソルを重ねると、カーソルの形がポインター(指の形)に変わり、クリックできる要素だと分かります。ところが、JavaScriptを使ってクリックイベントを設定した要素は、マウスを重ねてもカーソルの形は変わりません。

サンプル07
マウスカーソルの形状が変化しないとクリックできる要素なのか分かりにくい

 CSSでcursorプロパティの値に「pointer」を指定すると、a要素と同じポインターに変更できます。先ほどのサンプル06では、dt要素のcursorプロパティをpointerにすることで、その要素がクリックできることをユーザーに伝えています。

 通常のWebサイト制作では利用する機会が少ないCSSプロパティですが、jQueryなどのJavaScriptを使う場合には覚えておきましょう。


Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く

ランキング