.mouseleave () с .delay () работают вместе - PullRequest
Новая
       5

.mouseleave () с .delay () работают вместе

7 голосов
/ 06 июня 2011

У меня есть список из нескольких «триггеров» (<li>s), каждый триггер показывает определенный DIV, и у каждого DIV есть кнопка «Закрыть».

Теперь я хочу улучшить удобство использования, добавивтаймер / задержка для открытого / видимого DIV, чтобы через 3 или 5 секунд после того, как пользователь отодвинул свою мышь от триггера, открытый / видимый DIV исчезает.

Проблема, с которой я столкнулся сейчасявляется то, что всякий раз, когда я добавляю функцию с помощью .mouseleave (), открытый / видимый DIV скрывается, как только мышь покидает область триггера.

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

Вот FIDDLE / DEMO моей ситуации.

Любая помощь будетс благодарностью.

Спасибо.

Ответы [ 3 ]

10 голосов
/ 06 июня 2011

@ locrizak ответ правильный (+1). Это связано с тем, что .delay() по умолчанию соответствует очереди эффектов, но .hide() без параметров скрывает выбранные элементы без какого-либо эффекта, поэтому очередь эффектов вообще не задействуется.

Если вы хотите скрыться без анимации, просто используйте setTimeout: 

$('.trigger').mouseleave(function() {
    setTimeout(function () {
        $('.copy .wrapper').hide();
    }, 3000);
});

http://jsfiddle.net/mattball/93F3k/

Последнее редактирование, обещаю 

//Show-Hide divs
var current;
$('.trigger').live('mouseenter', function() {    
    var id = current = $(this).data('code');
    $('#' + id).show().siblings().fadeOut();
}).live('mouseleave', function() {
    var id = $(this).data('code');
    current = null;
    setTimeout(function ()
    {
        if (current !== id) $('#' + id).hide(1);
    }, 3000);
});

//Close button
$('.copy .wrapper span').live('click', function() {
    $(this).closest('.wrapper').stop(true, true).fadeOut();
});

Демо: http://jsfiddle.net/mattball/b2ew5/

3 голосов
/ 06 июня 2011

Используйте setTimeout вместо delay.

Рабочая демоверсия: http://jsfiddle.net/J7qTy/

С j Задание задержки Документация:

Метод .delay () лучше всего подходит для задержки между поставленными в очередь эффектами jQuery.Поскольку он ограничен - он, например, не предлагает способ отменить задержку - .delay () не является заменой встроенной функции JavaScript setTimeout, которая может быть более подходящей для определенных случаев использования.

3 голосов
/ 06 июня 2011

вам нужна длительность в шкуре: 

$('.copy .wrapper').delay(3000).hide('fast');

Вы можете взглянуть на документы http://api.jquery.com/delay/

обновление

это то, что вы ищете?

* * 1010

Вот так избавится от слушателя mouseleave

...