Jquery 페이드가 작동하지 않습니다.

Question

이 jquery를 사용하여 위에 맴돌았을 때 다른 하나 위에 div를 표시하고 있지만 작동하는 것 같지만 어떤 이유로 fadeIN 및 fadeOUT이 작동하지 않는 것처럼 보입니다.

내가 fadeTo를 각각 fadeIn과 fadeOut으로 변경하면 이전에 마주 본 것만 큼 사라지지 않습니다.

$(function() { 
$(".report-hover").hover(
    function() { 
     $(this).children("img").fadeTo(200, 0.85).end().children(".report-image-hover").show(); 
    }, 
    function() { 
     $(this).children("img").fadeTo(200, 1).end().children(".report-image-hover").hide(); 
    }); 
}); 

마크 업 :

<div class="report-hover"> 

       <div class="report-image-hover"> 
       <a href="#"> 
       <img src="<?php bloginfo('template_url'); ?>/images/.....png" alt="Report" /> 
       </a> 
       </div> 

       <img src="<?php bloginfo('template_url'); ?>/images/.....png" alt="Report" /> 
</div> 

Answer 1

확인이 : JSfiddle

그냥 FadeIn은 다른 매개 변수를 가지고 있기 때문에 다음이 작동하지 않습니다 FadeIn에 FadeTo를 교체하는 경우. JQuery FadeIn

Answer 2

이미지를 페이드 아웃하려면 .children() 대신 .find()을 사용해야합니다. .children()은 직접 자손 만 선택하고 이미지는 여전히 div 안에 중첩됩니다. the docs 참조 :

.children을() 메소드는 .find 다르다()이 .children에() .find() 아래로 여러 단계를 통과 할 수있는 동안 만 는 DOM 트리 아래 하나의 레벨을 이동 자손 요소 (손자, 등)도 선택하십시오. 로 바뀝니다 코드에 대한

:

$(".report-hover").hover(
    function() { 
     $(this).find("img").fadeTo(200, 0.85).end().children(".report-image-hover").show(); 
    }, 
    function() { 
     $(this).find("img").fadeTo(200, 1).end().children(".report-image-hover").hide(); 
});