jQuery show/hide - Вопрос о переменной задержки

Question

Я использую следующий код, чтобы показать окно, когда вы наведете указатель на определенный div и установили задержку при исчезновении, но есть ли способ отмены эффекта fadeOut, если пользователь возвращается к div?

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

Код для дивы

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

Думая об этом, я думаю, что это, вероятно, случай мне необходимости остановить функцию FadeIn работать, если вы уходите из DIV и вернуться назад.

Любые мысли были бы полезны как еще очень новые для jQuery!

На стороне заметьте, какой эффект следует использовать для того, чтобы ящик расширялся из ничего в высоту содержимого, а не просто затухал?

Answer 1

Существует очень хороший плагин, написанный в jQuery специально для этого типа ввода-вывода.

Это называется hoverIntent.js

Он создает задержку перед выполнением следующего действия слайда и т.д., отлично подходит для взаимодействия меню. Вы также можете вызвать свои собственные функции для каждого из событий истечения срока действия.

Пример использования по умолчанию является:

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

и fadeMenu Причем showMenu бы ваши функции JQuery, чтобы изменить внешний вид меню.

Чтобы создать собственную конфигурацию задержки вы просто использовать:

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

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

Edit:

Для вас, например, до тех пор, как это триггер, чтобы показать скрытые DIV, то вы должны быть в состоянии чтобы использовать следующее:

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