jQuery show / hide - вопрос о переменной задержки - PullRequest
Новая
       23

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

7 голосов
/ 23 ноября 2010

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

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

Код для div 

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

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

1 Ответ

3 голосов
/ 23 ноября 2010

Существует очень хороший плагин, написанный на 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 )

Редактировать:

Для вашего примера, пока триггер являетсячтобы показать скрытый 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');
}
...