Show hide opaque div

Question

私は最初に退屈になりたい画像のギャラリーを持っています。そして、ユーザーがマウスオーバーすると画像全体にフェードインします。

これは複数の画像などで簡単に行うことができますが、ページが読み込まれたときに特定のレベルに設定された透明度を持つディビジョンを使用できるかどうか、ユーザーがマウスをそれは適切な画像を表示し、divを薄くします。

私の頭の中では、イメージに倍増を伴わないオプションを見つけるのは難しいですが、かなり簡単なことです。

Answer 1

CSS：

img { 
    opacity: 0.5; 
    -webkit-transition: opacity 0.5s linear; 
} 
img:hover { 
    opacity: 1; 
    -webkit-transition: opacity 0.5s linear; 
} 

のjQuery：

$('img').css('opacity',0.5); 
$('img').hover(
    function(){ 
     $(this).stop().animate({opacity: 1}, 500); 
    }, 
    function(){ 
     $(this).stop().animate({opacity: 0.5}, 500); 
    }); 

JS Fiddle demo of both of the above techniques。

---

ない試合セレクタを行うそれらの要素をターゲットにするには、使用することができます：

$('#jQueryOnlyV2 img:not(".noFading")').css('opacity',0.5); 
$('#jQueryOnlyV2 img:not(".noFading")').hover(
    function(){ 
     $(this).stop().animate({'opacity':1},500); 
    }, 
    function(){ 
     $(this).stop().animate({'opacity':0.5},500); 
    }); 

セレクタは、要素内に含まれているCSS class="noFading"を持っていないすべての画像と一致して請求id="jQueryOnlyV2"である。

これは:not() CSS3セレクタ構文を使用しますが、あなたがむしろそうならば、jQuery not()も同様に使用できます。

Revised jQuery demo。

Answer 2

$("#gallery img") 
    .css('opacity', 0.2) 
    .mouseover(function() { 
     $(this).animate({opacity: 1}, 100); 
    }) 
    .mouseout(function() { 
     $(this).animate({opacity: 0.2}, 100); 
    }); 

See it in action