2 초 후 jQuery 마우스 위/아래 내용 - 버그

Question

마우스가 이미지 위에있을 때 2 초 후에 내용이 아래로 슬라이드하고 2 초 후에 이미지 위로 커서를 이동하면 슬라이드가 위로 올라가고, 괜찮아.

나는 사람도 그 범위에 걸쳐 마우스를 이동하면 표시 걸쳐하려면, 내 문제가 시작 ...

내가 충분히 명확 있다면 나도 몰라하지만 코드가 당신보다 더 말할 것입니다 생각 단어 :

링크 : http://jsfiddle.net/zDd5T/3/

HTML :

<img id="image" src="button_green.png" /> 
<span id="content"> 
    <a href="http://www.google.com">Link</a> 
    Some content here 
</span> 

CSS :

#image{ 
    left:0px; 
    position:absolute; 
    z-index: 10; 
} 
#content{ 
    top:48px; 
    left:0px; 
    position:absolute; 
    height: 100px; 
    border: 1px solid #f00; 
    display: block; 
    z-index: 0; 
    width: 100px; 
} 

자바 스크립트 : 사전에

$(document).ready(function() { 
    $('#content').hide(); 
    var over_img = false; 
    var over_span = false; 
    $('#image').live('mouseover', function() { 
     over_img = true; 
     setTimeout(function() { 
      $('#content').show('slide', { 
       direction: 'up' 
      }, 1000); 
     }, 2000); 
    }); 
    $('#content').live('mouseover', function() { 
     over_span = true; 
     setTimeout(function() { 
      $('#content').show('slide', { 
       direction: 'up' 
      }, 1000); 
     }, 2000); 
    }); 
    $('#image').live('mouseout', function() { 
     over_img = false; 
     if (!over_img && !over_span) { 
      setTimeout(function() { 
       $('#content').hide("slide", { 
        direction: "up" 
       }, 1000); 
      }, 2000); 
     } 
    }); 
    $('#content').live('mouseout', function() { 
     over_span = false; 
     if (!over_img && !over_span) { 
      setTimeout(function() { 
       $('#content').hide("slide", { 
        direction: "up" 
       }, 1000); 
      }, 2000); 
     } 
    }); 
}); 

감사합니다! 대신 이미지에 마우스 오버 이벤트를 바인딩의, 그리고

<div class="container"> 
    <img ... > 
    <div class="content"> 
    ..... 
    </div> 
</div> 

을 대신 부모 컨테이너에 바인딩 : 내가 제대로 문제를 이해하고있어 경우

Answer 1

jQuery 1.7+에서는 (.) 대신에 .live() 대신에()를 사용합니다. 나는이 방법으로 문제가 해결한다고 생각

: 여기

$(document).ready(function() { 
    var T1, T2; 
    $('#content').hide(); 
    $('body').on({ 
     mouseenter: function() { 
      clearTimeout(T2); 
      T1 = setTimeout(function() { 
       $('#content').slideDown(1000); 
      }, 2000); 
     }, 
     mouseleave: function() { 
      clearTimeout(T1); 
      T2 = setTimeout(function() { 
       $('#content').slideUp(1000); 
      }, 2000);  
     } 
    }, '#image, #content'); 
});​ 

는 대답에 대한 FIDDLE

Answer 2

, 나는 다음과 같은 마크 업 구조 조정 것입니다. 이렇게하면 콘텐츠 div가 표시되면 hover 이벤트가 바인딩 된 컨테이너 부모 요소 내부에 계속 남아 있으므로 마우스가 이미지 또는 콘텐츠 div (또는 다른 요소 컨테이너 내부)