.mouseleave () С.delay() совместная работа

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

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

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

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

Вот скрипка / демо о моем положении.

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

Спасибо.

3 5
jquery delay

3 ответа:

Ответ@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/

9

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

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

Из jQuery delay документация:

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

3

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

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

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

Обновление

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

$('.trigger').bind("mouseenter" , function() {    
    var id = $(this).attr("data-code"); // Get the data from the hovered element
    $('.copy .wrapper:visible').fadeOut();
    $('#' + id).stop(true, true).show(); // Toggle the correct div    
    //Close button
    $('.copy .wrapper span').click(function() {
        $('.copy .wrapper').fadeOut();
    });
});

Вот и избавьтесь от mouseleave listener

3