retraso Tricky en mouseover

Question

Esto es lo que tengo actualmente:

$("#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(); 
}); 

Lo que hace es:

Si al pasar el ratón # carrito-Resumen -> flycart abierta después de 500 ms

si mouseout .flycart -> cerrar flycart después de 500ms

Lo que necesito es:

Si al pasar el ratón # carrito-resumen para al menos 500 ms -> flycart abierta

si mouseout .flycart para al menos 500 ms -> cerrar flycart

editar para agregar: también uso hoverIntent, si es que puede ser utilizado aquí?

¡Muchas gracias!

Answer 1

Utilice el setTimeout para comprobar si una bandera que armar/desarmar (estoy usando una clase) sigue siendo válida.

$("#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

Parece que es posible que necesite el complemento HoverIntent.

No sé si te ayudará con el mouse ATLEAST 500ms sin embargo. Pero tal vez hay una opción para eso.

Answer 3

Usted puede utilizar el plugin hoverIntent de la siguiente manera:

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

Se podría hacer:

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

ofrecer una solución

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"); 

funcionará si la canasta se actualiza de forma dinámica

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