2010年05月30日に投稿

[jQuery]マウスオーバーで画像の透明度を変更する

ページが読み込まれた段階では、薄くなった状態で表示され
マウスオーバーで透明度を0にします。
この動作を簡単に実現するために、jQueryを使用します。

サンプル
books

コード
[javascript]
$(function(){
$(“#target_image”).fadeTo(0,0.2);
$(“#target_image”).hover(
function(){
$(this).stop().fadeTo(“fast”,1.0);
},
function(){
$(this).stop().fadeTo(“fast”,0.2);
}
);
});
[/javascript]

2行目
IDがtarget_imageの要素をfadeTo関数で透明度を0.2にします。

3行目
IDがtarget_imageの要素にマウスオーバーした時の動作を定義します。
マウスオーバーとマウスアウトした時の動作はhover関数を使用します。
hover(マウスオーバーの動作,マウスアウトの動作)
マウスオーバー時に透明度0に、マウスアウト時に透明度を0.2に戻しています。

関連記事

Leave a Reply