アニメーションエフェクトで画像を滑らかに切り替える
先ほど作成した画像ギャラリーは、サムネイル画像をクリックするといきなりメイン画像が切り換わるものでした。このままだと少し味気ないので、画像をアニメーションエフェクト付きで滑らかに切り替えるように変更しましょう。
変更後のスクリプトは以下のようになります。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(実行結果)
ソーシャルリアクション
この連載の記事
一覧へWebPro
jQueryとAjaxで作るスムーズページング
WebデザイナーのためのjQuery入門。jQueryのAjax機能を使ってスムーズなページングを実現する方法をチュートリアルで解説する。