표시 숨기기 불투명 한 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".

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