jQuery mouseout 및 setTimeout

Question

다음 코드가 있습니다.

$("#login").mouseout(function() { 
    setTimeout(function() { 
     $("#login").animate({ 
      height: "toggle" 
     }) 
    }, 500); 
}); 

마우스가 #login을 종료하면 500ms를 기다린 다음 요소를 숨 깁니다. 내가 원하는 것은 마우스가 엘리먼트를 떠나서 500ms 안에 다시 돌아 오면 엘리먼트를 숨길 수 없다는 것입니다. 그렇지 않으면 마우스가 요소의 "범위"에서 500ms 이상 벗어난 경우 애니메이션 기능을 호출하고 요소를 숨 깁니다.

내가 거기에

$("#login").mouseover(function() { 
    clearTimeout(t); 
}); 

를이 코드를 삽입하고 애니메이션이 완료된 후에는 다시 나타납니다 닫을 때 나는 요소 위로 마우스를 취합니다. 당신이 사용할 수 있도록

Answer 1

, setTimeout에 대한 변수를 선언 clearTimeout :
(플러스 해결 문제를 "그것은 다시 팝업 것이다")

$("#login") 
    .mouseout(function() { 
     window.t = setTimeout(function() { 
      $("#login").animate({ 
       height: "toggle" 
      }) 
     }, 500); 
    }) 
    .mouseover(function(){ 
     if(window.t){ 
      clearTimeout(window.t); 
      window.t = undefined; 
     }else{ 
      //Do your menu popup thing here 
     } 
    }); 

Answer 2

당신은에 시간 제한을 취소 할 수 있습니다 mouseenter 또는 mouseover 이벤트.

var t; 
$("#login").mouseenter(function() { 
    clearTimeout(t); 
}); 
$("#login").mouseout(function() { 
    t = setTimeout(function() { 
     $("#login").animate({ 
      height: "toggle" 
     }) 
    }, 500); 
});