jQuery : 마우스 오버 타임 아웃

Question

이 스크립트는

$('.parent a').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover'){ 
     if ($(this).siblings('.child').css('width') == '0px' ){ 
      $(this).siblings('.child').animate({'width': window.innerWidth}, 500); 
     } 
    }else{ 
     if (!$(this).hasClass('active')){ 
      $(this).siblings('.child').animate({'width': 0}, 500); 
     } 
    } 
}); 

위의 스크립트에서 확인한 것처럼 $('.parent a') 위에 마우스를 놓으면 형제가 너비를 확장합니다.

지금 형제 자매님은 즉시 마우스를 놓으면 즉시 답장합니다. 나는 이미 마우스가 끝났을 때 그 일이 일어나길 원합니다. 5 seconds

어떻게 만드나요?

Answer 1

다른 이벤트 유형에 대한 이벤트 처리기 내에서 테스트하는 것이 아니라 별도의 이벤트 리스너를 추가했음을 유의하십시오.

var timer; 

$('.parent a').live('mouseover', function(event) { 
    $Sibling = $(this).siblings(".child"); 
    timer = window.setTimeout(function() { 
     if ($Sibling.css('width') == '0px' ){ 
      $Sibling.animate({'width': window.innerWidth+"px"}, 500); 
     }}, 5000); 
}); 

$('.parent a').live('mouseout', function(event) { 
    if (timer) { 
     window.clearTimeout(timer); 
    } 
    if (!$(this).hasClass('active')){ 
     $(this).siblings('.child').animate({'width': "0px"}, 500); 
    } 
}); 

사용자가 앵커를 마우스 오버 할 때 실행되도록 타이머를 설정할 수 있습니다. 타이머가 트리거되기 전에 마우스 아웃하면 타이머를 지우고 이벤트가 발생하지 않도록합니다. 그렇지 않으면 타이머가 작동하면 원본 스크립트에 따라 요소가 확장됩니다.

또한 jQuery에서 DOM을 한 번만 트래버스하고 결과를 $ Sibling에 저장함으로써 스크립트를 더 빠르게 만듭니다.

테스트하려면 다음 HTML을 사용했습니다.

<div class="parent"> 
     <a href="#">Hello</a> 
     <div class="child" style="background-color: Aqua; display: block; width: 0px; overflow: hidden;">World</div> 
    </div> 

Answer 2

당신은 당신이 setTimeout()를 통해 여기에 타이머를 저장하고 clearTimeout()를 통해 삭제하려는에서는 setTimeout

$('.parent a').live('mouseover mouseout', function(event) { 
    var elements = $(this).siblings('.child'); 
    if ($(this).siblings('.child').css('width') == '0px' ){ 
     setTimeout(animate(elements, window.innerWidth), 5000); 
    } 
}else{ 
    if (!$(this).hasClass('active')){ 
     setTimeout(animate(elements, 0), 5000); 
    } 

}); 

function animate(elements, width) { 
    elements.animate({'width': width}, 500); 
} 

Answer 3

를 사용할 수 있지만, 당신은 항상 당신이 $.data()를 통해 할 수있는 요소, 당 그것을 을 수행 할 이 같은 :

$('.parent a').live({ 
    mouseover: function() { 
    var self = this; 
    $.data(this, "timer", setTimeout(function() { 
     if ($(self).siblings('.child').css('width') == '0px' ){ 
     $(self).siblings('.child').animate({'width': window.innerWidth}, 500); 
     } 
    }, 5000)); 
    }, 
    mouseout: function() { 
    clearTimeout($.data(this, "timer")); 
    if (!$(this).hasClass('active')){ 
     $(this).siblings('.child').animate({'width': 0}, 500); 
    } 
    } 
}); 

You can test it out here, 내가 읽고 위의 쉽게 찾을 수 이전 버전을 사용하는 경우 이전에 있었다처럼 jQuery를 1.4.3+에 있지만, 그냥 포맷 :

$('.parent a').live('mouseover mouseout', function(event) { 
    if (event.type == 'mouseover'){ 
    var self = this; 
    $.data(this, "timer", setTimeout(function() { 
     if ($(self).siblings('.child').css('width') == '0px' ){ 
     $(self).siblings('.child').animate({'width': window.innerWidth}, 500); 
     } 
    }, 5000)); 
    }else{ 
    clearTimeout($.data(this, "timer")); 
    if (!$(this).hasClass('active')){ 
     $(this).siblings('.child').animate({'width': 0}, 500); 
    } 
    } 
}); 

You can confirm that works here합니다.