retard Tricky sur mouseover

C'est ce que j'ai actuellement:retard Tricky sur mouseover

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

Ce qu'il fait est:

Si mouseover # panier-résumé -> flycart ouvert après 500ms

si mouseout .flycart -> fermer flycart après 500ms

Ce dont j'ai besoin est:

Si mouseover # panier-résumé pour ATLEAST 500ms -> ouvert flycart

si mouseout .flycart pour ATLEAST 500ms -> flycart près

Modifié à ajouter: J'utilise également hoverIntent, si cela peut être utilisé ici?

Merci beaucoup!

Source

2009-10-02 3zzy

Connaissez-vous assez sur javascript pour écrire une fonction qui détermine si la souris a plané o ver un élément pendant au moins 500ms? –

Non, je ne le fais pas. Je suis un concepteur qui fait aussi un peu de JS (et cherche SO pour de l'aide technique). – 3zzy

Utilisez le setTimeout pour vérifier si un drapeau vous définissez/unset (j'utilise une classe) est toujours valide.

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

Source

2009-10-02 16:36:09

On dirait que vous pourriez avoir besoin du plugin HoverIntent.

Je ne sais pas si ça va vous aider avec le mouseout ATLEAST 500ms cependant. Mais peut-être existe-t-il une option pour cela.

Source

2009-10-02 16:31:42 slolife

Trouvé une demande similaire ici: http://stackoverflow.com/questions/1482029/waiting-x-milliseconds-after-an-event-recheck-and-trigger mais je veux utiliser hoverIntent si possible. – 3zzy

Vous pouvez utiliser le plugin hoverIntent comme suit:

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

Source

2009-10-02 16:35:19 karim79

Vous pouvez faire:

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); 
})...

Source

2009-10-02 16:44:45

offre une solution

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

fonctionnera si le panier est mis à jour dynamiquement

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

Source

2015-02-16 20:23:13 Atmarama

Répondre

Questions connexes