Tricky opóźnienie po najechaniu myszą

Question

To co mam obecnie:

$("#cart-summary").mouseenter(function() { 
    $('.flycart').delay(500).slideDown('fast'); 
}); 
$(".flycart").mouseleave(function() { 
    $('.flycart').delay(500).slideUp('fast'); 
}).find('a.close').click(function(){ 
    $(this).parents('.flycart').hide(); 
}); 

Co robi jest:

Jeśli po najechaniu myszką # koszyk-summary -> open flycart po 500ms

jeśli mouseout .flycart -> zamknij flycart po 500ms

Potrzebuję:

Jeśli po najechaniu myszką # koszyk-summary na conajmniej 500ms -> open flycart

jeśli mouseout .flycart dla conajmniej 500ms -> blisko flycart

Edytowane do dodania: Używam również hoverIntent, jeśli to możliwe używać tutaj?

Wielkie dzięki!

Answer 1

pomocą setTimeout, by sprawdzić, czy flaga ustawić/wyłączony (używam klasy) jest nadal ważna.

$("#cart-summary").mouseenter(function() { 
    $("#cart-summary").addClass("hasFocus"); 
    setTimeout(function(){ 
     if ($("#cart-summary").hasClass("hasFocus")) { 
      $('.flycart').slideDown('fast'); 
     } 
     }, 500); 
     }); 

$("#cart-summary").mouseleave(function() { 
    $("#cart-summary").removeClass("hasFocus"); 
}); 


$(".flycart").mouseenter(function() { 
    $("#cart-summary").removeClass("lostFocus");  
}); 

$(".flycart").mouseleave(function() { 
    $("#cart-summary").addClass("lostFocus"); 
    setTimeout(function(){ 
     if ($("#cart-summary").hasClass("hasFocus")) { 
      $('.flycart').slideUp('fast'); 
      }).find('a.close').click(function(){ 
      $(this).parents('.flycart').hide(); 
     } 
    }, 500) 
}); 

Answer 2

Wygląda na to, że możesz potrzebować wtyczki HoverIntent.

Nie wiem, czy pomoże ci to w wypłynięciu ATLEAST 500 ms. Ale może jest na to opcja.

Answer 3

Można użyć wtyczki hoverIntent następująco:

var config = {  
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
    interval: 500, // number = milliseconds for onMouseOver polling interval  
    timeout: 500, // number = milliseconds delay before onMouseOut  
}; 

$(".flycart").hoverIntent(function() { 
     $('.flycart').slideDown('fast'); 
}, function() { 
     $('.flycart').slideUp('fast'); 
}).find('a.close').click(function(){ 
    $(this).parents('.flycart').hide(); 
}); 

Answer 4

Można zrobić:

var timeout, 
    $flycart = $(".flycart"), 
    $summary = $("#cart-summary"), 
    delay = 500; 

$summary.mouseenter(function() { 
    if (timeout) window.clearTimeout(timeout); 
    timeout = window.setTimeout(function(){ 
     if ($flycart.is(":visible")) { 
      $flycart.slideDown('fast'); 
     } 
    }, delay); 
}); 
$flycart.mouseleave(function() { 
    if (timeout) window.clearTimeout(timeout); 
    timeout = window.setTimeout(function(){ 
     if ($flycart.is(":visible")) { 
      $flycart.slideUp('fast'); 
     } 
    }, delay); 
})... 

Answer 5

zaoferować rozwiązanie

var mouseenterTimerCart; 
var mouseleaveTimerCart; 

$(document).on({ 
    mouseenter: function() { 
     if (mouseleaveTimerCart) clearTimeout(mouseleaveTimerCart); 
     mouseenterTimerCart = setTimeout(function() { 
      $("#head-cart .cart_items").show() 
     }, 500); 
    }, 
    mouseleave: function() { 
     if (mouseenterTimerCart) clearTimeout(mouseenterTimerCart); 
     mouseleaveTimerCart = setTimeout(function() { 
      $("#head-cart .cart_items").hide() 
     }, 500); 
    } 
}, "#head-cart .full, #head-cart .cart_items"); 

będzie działać, jeśli kosz jest aktualizowany dynamicznie

$("#head-cart").html(...crat-html-block...)