jQuery show/hide - Question sur la variable de retard

Question

J'utilise le code suivant pour afficher une boîte lorsque vous passez la souris sur un certain div et que vous avez défini le délai de fondu, mais existe-t-il un moyen d'annuler l'effet fadeOut si l'utilisateur remonte à la div?

jQuery("#cart-box").hover(function() 
{ 
    jQuery("#cart-container").fadeIn('fast'); 
}, function() 
{ 
    jQuery("#cart-container").delay(800).fadeOut('fast'); 
}); 

code

pour la divs

<div class="cart-box" id="cart-box"><a href="#">Cart</a><div class="cart-container" id="cart-container"><div class="cart-contents">contents</div></div></div> 

En y repensant je pense qu'il est probablement un cas besoin de moi d'arrêter de travailler la fonction fadeIn si vous allez loin de la div et revenir en arrière.

Toute idée serait utile comme encore très nouveau pour jQuery! Sur une note de côté, quel effet dois-je utiliser pour faire passer la boîte de rien à la hauteur du contenu au lieu de simplement se faner?

Answer 1

Il y a un très joli plugin écrit en jQuery spécifiquement pour ce type de fonctionnalité d'entrée/sortie de la souris.

Il est ce qu'on appelle hoverIntent.js

Il crée un retard configurable avant d'effectuer la prochaine action diapositives etc, idéal pour les interactions de menu. Vous pouvez également appeler vos propres fonctions sur chacun des événements d'expiration.

Un exemple de l'utilisation par défaut est:

$("#menu li").hover(showMenu, fadeMenu) 

vos ayant pour effet d'fonctions jQuery fadeMenu et showMenu pour modifier l'apparence du menu.

Pour créer votre propre configuration du retard que vous utilisez simplement:

var config = {  
    over: showMenu, 
    timeout: 500, // number = milliseconds delay before fadeMenu is called 
    out: fadeMenu 
}; 

$("#menu li").hoverIntent(config) 

Edit:

Pour vous par exemple, tant que l'est le déclencheur pour afficher les div cachées, alors vous devriez être en mesure pour utiliser ce qui suit:

var config = {  
    over: showMenu, 
    timeout: 500, // number = milliseconds delay before fadeMenu is called 
    out: fadeMenu 
}; 

$("#cart-box a").hoverIntent(config); 

function showMenu() { 
    jQuery("#cart-container").fadeIn('fast'); 
} 

function fadeMenu() { 
    jQuery("#cart-container").fadeOut('fast'); 
}