Jquery 첫 번째 호버에서 페이드 인/아웃이 작동하지 않습니다.

Question

페이드 인/아웃 jquery 플러그인을 사용하려고합니다. 어제 다른 사람들의 도움을 받아 거의 완벽하게 작동하게되었습니다. 하지만 페이드 인 효과는 div 위로 마우스를 가져 가면 처음에는 작동하지 않습니다. 그것은 두 번째 및 후속 호버 후 작동합니다. 그리고 페이드 아웃은 전혀 작동하지 않는 것 같습니다.

http://jsfiddle.net/c6gRp/4/

참고 : 아무것도 1 단계 위에 마우스를 올려 그러나 컬러 블록이 당신이 다른 단계에 걸쳐 마우스를 가져 가면 인/페이드 아웃 가정 할 때 일이 생각하지 않습니다. 저는 디자이너가 많아서 왜 애니메이션이 첫 번째 호버에서 발생하지 않는지 잘 모르겠습니다. 이것은 JS 코드를 수행하는 적절한 방법입니까?

$(document).ready(function() { 

    $("div.secure").hover(
     function() { 
      $("div.secure-hover").stop(true, true, true).fadeIn('slow'); 
     }, 
     function() { 
      $("div.secure-hover").stop(true, true, true).fadeOut('slow'); 
     } 
    ); 

    $("div.cash").hover(
     function() { 
      $("div.steps-hover.cash-hover").stop(true, true, true).fadeIn('slow'); 
     }, 
     function() { 
      $("div.steps-hover.cash-hover").stop(true, true, true).fadeOut('slow'); 
     } 
    ); 

    $("div.credit").hover(
     function() { 
      $("div.credit-hover").stop(true, true, true).fadeIn('slow'); 
     }, 
     function() { 
      $("div.credit-hover").stop(true, true, true).fadeOut('slow'); 
     } 
    ); 

}); 

도움 주셔서 감사합니다.

Answer 1

당신은 모든 -hover이 "div.cash:hover의 div.cash - 호버"

div.default, div.cash:hover div.cash-hover, div.secure:hover div.secure-hover, div.credit:hover div.credit-hover{ 
    margin: 0; 
    padding: 0; 
    width: 960px; 
    text-align: center; 
    height: 180px; 
    position: absolute; 
    top: 234px; 
    display: block; 
    left: 0; 
    z-index: 3; 
    right: 0px; 
    cursor: auto; 
}  

처럼은 속성 폭 설정 한 높이 ,. .. "div.cash-hover"와 같이 변경하면 div.cash 요소 위로 마우스를 가져갈 때만 나타납니다.

div.default, div.cash-hover,div.secure-hover, div.credit-hover{ 
    margin: 0; 
    padding: 0; 
    width: 960px; 
    text-align: center; 
    height: 180px; 
    position: absolute; 
    top: 234px; 
    display: block; 
    left: 0; 
    z-index: 3; 
    right: 0px; 
    cursor: auto; 
} 
//set all -hover to display none 
div.cash-hover, div.secure-hover, div.credit-hover { 
    display: none; 
} 

div.cash-hover의 속성을 시작 부분부터 $ ("div.cash")로 설정합니다. 호버로 불투명도를 애니메이션 할 수 있습니다. http://jsfiddle.net/c6gRp/6/

Answer 2

div.online-hover에 대해 아무것도 지정하지 않았습니다.

$("div.online").hover(
function() { 
    $("div.online-hover").stop(true, true, true).fadeIn('slow'); 
}, 
function() { 
    $("div.online-hover").stop(true, true, true).fadeOut('slow'); 
}); 

http://jsfiddle.net/c6gRp/5/ 당신의 CSS에