マウスオーバー時にクールに画像を切り替えるjQueryサンプル:phpspot開発日誌

前の記事 ≪：すっきりまとまった雑誌スタイルのフリーWordPressテーマ集
次の記事 ≫：2009年4月3日管理人のブックマーク

マウスオーバー時にクールに画像を切り替えるjQueryサンプル

2009年04月03日-

スポンサードリンク

Sliding Boxes and Captions with jQuery | Build Internet!

マウスオーバー時にクールに画像を切り替えるjQueryサンプル。
マウスオーバーで滑らかにキャプションが現れたり、画面を切り替えたりできるサンプルのデモとダウンロードが出来ます。

デモページ

CSSをでレイヤーを重ね合わせて、上の要素をアニメーションさせてるだけのようですが、なかなかこれがクールですね。

$('.boxgrid.caption').hover(function(){
        $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
    }, function() {
        $(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
    }
);

単純に画像を並べるだけよりもよい効果が得られそうですね。

関連エントリ

関連の記事検索：jQuery, JavaScript, マウスオーバー