jQuery show/hide - Pregunta sobre la variable de retardo

Question

Estoy usando el siguiente código para mostrar un cuadro cuando mueves un determinado div y he configurado el retraso en el fundido de salida pero ¿hay alguna forma de cancelar el efecto fadeOut si el usuario vuelve a la div? Código

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

para 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> 

Pensando en ello creo que es probablemente un caso que me necesidad de parar la función fadeIn trabajo si vas lejos del div y volver.

¡Cualquier idea sería útil ya que es muy nueva en jQuery!

Por un lado, ¿qué efecto debo usar para que la caja se expanda desde la nada hasta la altura del contenido en lugar de simplemente desvanecerse?

Answer 1

Hay un plugin muy bueno escrito en jQuery específicamente para este tipo de funciones de entrada/salida del mouse.

Se llama hoverIntent.js

Se crea un retardo configurable antes de realizar la siguiente acción de diapositivas, etc, ideal para las interacciones de menú. También puede llamar a sus propias funciones en cada uno de los eventos de vencimiento.

Un ejemplo del uso por defecto es:

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

medio de las cuales fadeMenu y showMenu serían sus funciones jQuery para cambiar el aspecto del menú.

para crear su propia configuración de la demora sólo tiene que utilizar:

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

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

Editar:

Para usted ejemplo, siempre que el es el gatillo para mostrar los div ocultas, entonces debería ser capaz para usar lo siguiente:

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