jQuery 마우스 오버() 깜박임/페이딩

Question

이미지 "A"위로 마우스를 가져 가면 이미지 "A"위에 "B"이미지가 오버레이됩니다. 이상적으로는 페이드 할

HTML :.

<div id="prod-image"> 
     <img src="../imgs/products/mens/image-A.jpg" class="box-shadow" /> 
    </div> 
    <div id="prod-overlay"> 
     <img src="../imgs/image-B.jpg" /> 
    </div> 

jQuery를 :

$(function() { 
    $("#prod-image").hover(function() { 
     $(this).next().fadeIn().show(); 
    }, function() { 
     $(this).next().fadeOut().hide(); 
    }); 
    }); 

문제는 마우스가 같이 떨어져 그것에서 깜박 의미 호버 효과를 retriggers 이동하고 모든 시간 마우스가 움직이는 모든 픽셀을 다시 트리거합니다. 컨테이너 div를 떠날 때 두 번째 액션 만 트리거 할 수 있도록하려면 어떻게해야합니까?

도움 주셔서 감사합니다.

[편집]

CSS : 기본적으로 그냥이 다른 상단에 div에 앉아

#prod-overlay { 
    display: none; 
    position: absolute; 
     z-index: 999; 
    top: 0px; 
    } 

. 나는 그것이 정말로 적절하다고 생각하지 않습니까? Z- 색인이 일을 망치지 않는 한.

[수정 2]이 그것을 수정 ...이 우연히 발견/신경 수있는 사람을위한

:

$("#prod-image").hover(function() { 
    $("#prod-overlay").stop(true).fadeTo("normal",1); 
}, function() { 
    $("#prod-overlay").fadeTo("normal",0); 
}); 

나에게 조금 불필요한 것 같습니다하지만 누가 내가 jQuery를 비판하는 건가요?

Answer 1

동일한 컨테이너에서 2 개의 이미지를 가져오고이 컨테이너에서 호버 트리거링을 적용하면 어떨까요?

<div id="container"> 
    <div id="prod-image"> 
     <img src="../imgs/products/mens/image-A.jpg" class="box-shadow" /> 
    </div> 
    <div id="prod-overlay"> 
     <img src="../imgs/image-B.jpg" /> 
    </div> 
</div> 

및

$(function() { 
$("#container").hover(function() { 
    $("#prod-overlay").fadeIn().show(); 
}, function() { 
    $("#prod-overlay").fadeOut().hide(); 
}); 
}); 

에게 그것은 작동한다!