Web制作の現場で使えるjQuery　UIデザイン入門 ― 第6回

jQueryのイベントをチュートリアルで学ぶ（前編） (5/6)

クリックされるたびに異なる命令を実行する toggle()

　クリックされるたびに異なる命令を実行したいときに便利なのが、toggle()です。括弧内に function(){...} を，(カンマ)区切りで複数設定でき、クリックされた順番に命令を実行していきます。設定してある命令が最後まで実行されたら最初の命令に戻って繰り返します。

$(function(){
    $(セレクター).toggle(function(){
        //最初にクリックされた際に実行したい命令
    },function(){
        //2回目にクリックされた際に実行したい命令
    },function(){
        //3回目にクリックされた際に実行したい命令
    },function(){
        (中略)
    },function(){
        //最後にクリックされた際に実行したい命令
    })
})

　以下のサンプルでは、ボタンをクリックするたびに表示される画像が切り替わります。

▼サンプル10（スクリプト部分）

$(function(){
    $("button").toggle(function(){
        $("img").attr("src","sea.jpg").attr("alt","海");
    },function(){
        $("img").attr("src","Jellyfish.jpg").attr("alt","くらげ");
    },function(){
        $("img").attr("src","Building.jpg").attr("alt","建物");
    },function(){
        $("img").attr("src","flower.jpg").attr("alt","花");
    })
})

▼サンプル10（(X)HTML部分）

<button>画像を変更</button>
<p><img src="flower.jpg" alt="花" /></p>

▼サンプル10（実行結果）

ボタンがクリックされるたびに画像が切り替わる

マウスオーバー／マウスアウトを感知する mouseover() と mouseout()

　 mouseover() と mouseout()は、特定の要素上にマウスが重なったタイミングを感知して、設定された命令を実行します。ナビゲーションメニューでおなじみのマウスオーバー効果でおなじみですね。mouseover() と mouseout() は多くの場合、組み合わせて使います。

■mouseover()

　mouseover() は、特定の要素上にマウスカーソルが重なったときに、命令を実行します。

$(セレクター).mouseover(function(){
        //セレクターで指定した要素にマウスカーソルが重なった際に実行したい命令
})

■mouseout()

　mouseout() は、特定の要素上にマウスカーソルが外れたときに命令を実行します。

$(セレクター).mouseout(function(){
        //セレクターで指定した要素からマウスカーソルが外れた際に実行したい命令
})

　以下のサンプルでは、img要素にマウスカーソルが重なった際に、img要素のsrc属性の値を「sea.jpg」に、alt属性の値を「海」に書き換えます。マウスカーソルがimg要素から外れた際には、img要素のsrc属性の値を「flower.jpg」に、alt属性の値を「花」に書き換えます。

▼サンプル12（スクリプト部分）

$(function(){
    $("img").mouseover(function(){
        $(this).attr("src","sea.jpg").attr("alt","海");
    }).mouseout(function(){
        $(this).attr("src","flower.jpg").attr("alt","花");
    })
})

▼（サンプル12）（(X)HTML部分）

<img src="flower.jpg" alt="花" />

▼（サンプル12）（実行結果）

画像にマウスを乗せると画像が切り替わる