リンク上にマウスオーバーすると画像がぼやけます

Question

最初に私はJavaScript/jQueryに比較的新しいです。

JavaScriptまたはjQueryによって、リンクのマウスオーバー時に画像がコンテンツ領域を「楽に」して見えるようにしたいと考えています。マウスが外に出ると、イメージが消えます。私はそのようなテクニック/効果を、成功なしで探しました。

イメージは、コンテンツ領域を覆い、背景イメージをカバーします。リンクは同じコンテンツ領域にあり、画像イージングの上に表示されますが、Zインデックスで達成できると思います。次のリンクにマウスを重ねると、次の画像が表示されます。合計3枚の画像があります。

これだけのチュートリアルの助け、指導、指示は大変ありがとうございます。

Answer 1

これが含まれる画像の不透明度を変更するマウスおよびマウス・アウトのハンドラを受け付ける.hover()方法、及び.animate()方法を使用してjQueryを使って、かなり容易に達成することができる。

$('.easer').hover(function(e){ 
    $(this).find('img').stop(true,false).animate({'opacity':'1'}); 
},function(e){ 
    $(this).find('img').stop(true,false).animate({'opacity':'0'}); 
}); 

See an example of the above here.