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

jQueryで作る画像ギャラリーのチュートリアル (2/3)

アニメーションエフェクトで画像を滑らかに切り替える

　先ほど作成した画像ギャラリーは、サムネイル画像をクリックするといきなりメイン画像が切り換わるものでした。このままだと少し味気ないので、画像をアニメーションエフェクト付きで滑らかに切り替えるように変更しましょう。

　変更後のスクリプトは以下のようになります。CSSも合わせて1か所だけ変更しています（以下には変更部分のみ示します）。

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

$(function(){
    $("#navi a").click(function(){
        $("#main img").before("<img src='"+$(this).attr("href")+"' alt=''>");
        $("#main img:last").fadeOut("fast",function(){
            $(this).remove()
        });
        return false;
    })
})

▼サンプル02（CSSの変更部分）

#main img{
    position:absolute;
    border:3px solid white;
}

　変更後のスクリプトでは、サムネイルがクリックされるとbefore()でメイン画像（#main img）の前に新たなimg要素を挿入します(関連記事)。挿入するimg要素のsrc属性には、クリックされたa要素のhref属性から読み出した値（クリックされたサムネイルに対応するメイン画像）を設定します。

　#main内のimg要素は、追加したCSSで position:absolute を設定しているので、もともと表示されていたメイン画像と後からスクリプトで追加した画像はぴったり重なった状態になります。

もともと表示されていたメイン画像（手前）とスクリプトで追加した画像（奥）が重なって表示される（実際には同じ位置にぴったり重なる）

　次にfadeOut()を使って（関連記事）、もともと表示されているメイン画像を少しずつ非表示にしていきます。手前側のメイン画像が非表示になることで、奥にあった新しい画像が出現する仕組みです。div#main内には、もとのメイン画像と先ほど追加した画像しかありませんので、セレクターで#main img:lastと指定すれば、もとのメイン画像を選択できます。

もともと表示されていたメイン画像がフェードアウトし、スクリプトで追加した画像が出現する

　フェードアウトが完了しても、もとのimg要素はdisplayプロパティがnoneになって見えなくなっただけでHTML要素としては存在していますので、クリックを繰り返すとimg要素が次々と増えてしまいます。そこで、コールバック関数内でremove()を使い(関連記事）、フェードアウトが終わったらimg要素を完全に削除するように設定します。

　以上で、アニメーションエフェクト付きの画像ギャラリーが完成しました。

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

サンプル02の実行画面。サムネイルをクリックするとメイン画像がアニメーションエフェクト付きで徐々に切り換わる