как отложить действие, а не ответ

Question

Итак, у меня есть эффект опрокидывания вниз, но я хочу, чтобы он работал только, если кто-то нависает над элементом более чем на 0,5 сек.

$('#cart_nav2').mouseenter(function(){ 
    $('#cart_status').hide(); 
    $('#cart_contents').stop(true,true).delay(500).slideDown('#cart_contents'); 
}); 
$('#cart_nav2').mouseleave(function(){ 
    $('#cart_contents').slideUp('#cart_contents'); 
}); 

Так себе ЭЛЕМЕНТ «cart_contents» покажет .5 секунды после мыши ввода, но я хочу, чтобы показать только если курсор колебались более чем .5 секунд. Что я делаю не так?

Answer 1

Вы можете использовать решение на основе таймера, как

var navContentSliderTimer; 
$('#cart_nav2').mouseenter(function() { 
    navContentSliderTimer = setTimeout(function() { 
     $('#cart_status').hide(); 
     $('#cart_contents').stop(true, true).delay(500).slideDown(); 
    }, 500); 
}); 
$('#cart_nav2').mouseleave(function() { 
    clearTimeout(navContentSliderTimer) 
    $('#cart_contents').slideUp(); 
}); 

Answer 2

Проблема заключается в том, что функция вызывается сразу после того, как вы наведите курсор мыши на # cart_nav2. Вы просто задерживаете анимацию, но анимация всегда будет происходить. Если вы перемещаете мышь, вы сразу же вызываете анимацию slideUp. Поэтому, если вы быстро опрокинете элемент, он сразу же сдвинется вверх (даже если он не сможет), а затем через 5 секунд он сдвинется вниз. Попробуйте

$('#cart_nav2').mouseenter(function(){ 
    $('#cart_status').hide(); 
    setTimeout(function(){ 
     if ($('#cart_nav2').is(':hover')) { 
      $('#cart_contents').stop(true,true).slideDown('#cart_contents'); 
     },500) 
}); 

Answer 3

Ниже всего лишь иллюстрация идеи (не тестировался):

isHovering = false; // should have a "global enough" scope. 

$('#cart_nav2').mouseenter(function(){ 
    isHovering = true; 
    var date = new Date(); 
    var startTime = date.getTime() 
    do while (isHovering and date.getTime() - startTime < 5000) { 
    // can use small delay here 
    } 

    if (isHovering) { 
     $('#cart_status').hide(); 
     $('#cart_contents').('#cart_contents'); 
    } 
}); 

$('#cart_nav2').mouseleave(function(){ 
    isHovering = false; 
    $('#cart_contents').slideUp('#cart_contents'); 
});