Задержка jQuery не работает при мышлении - PullRequest
Новая
       38

Задержка jQuery не работает при мышлении

0 голосов
/ 01 ноября 2011

Может кто-нибудь объяснить, почему это не сработает? 

jQuery('.right-et-tooltip').delay(800).mouseout(function(){
        jQuery(this).find('.right-et-tooltip-box').animate({ opacity: 'hide', left: '-100px' }, 30);
});

Я вообще не задерживаюсь. Как только мышь вышла, БУМ исчезает.

Спасибо, я попробовал несколько вещей, так что просто разочаровался.

1 Ответ

1 голос
/ 01 ноября 2011

Ваша задержка абсолютно ничего не делает, потому что она связана с селектором jQuery, а не с функцией в обработчике mouseout.

Попробуйте вместо этого ... 

jQuery('.right-et-tooltip').mouseout(function(){
        jQuery(this).find('.right-et-tooltip-box').delay(800).animate({ opacity: 'hide', left: '-100px' }, 30);
});

Ваш jsFiddle с примененной коррекцией ...

http://jsfiddle.net/zGtBN/2/

РЕДАКТИРОВАТЬ (примечание):

Было бы гораздо лучше использовать методы mouseenter & mouseleave, а не методы mouseover & mouseout, которые обычно вызывают быстрое мигание во время зависания мыши.

Затем вы можете просто объединить обработчики mouseenter и mouseleave в один, используя метод jQuery .hover().

Здесь точно такие же две функции, введенные в метод .hover() ...

http://jsfiddle.net/zGtBN/3/

РЕДАКТИРОВАТЬ 2:

При повторном вводе до завершения анимации выхода анимации будут поставлены в очередь. Если вы входите и выходите очень быстро несколько раз, все анимации будут мигать, пока они не остановятся.

Чтобы предотвратить наложение очереди анимации и создание новой проблемы, в которой она включается / выключается из-за задержки mouseleave, используйте jQuery .stop(true, false) для функции mouseenter, подобной этой ... 

jQuery(this).find('.right-et-tooltip-box').stop(true,false).animate({ opacity: 'show', left: '-100px' }, 30);

После mouseenter он немедленно останавливает любую анимацию mouseleave. Параметр true в параметре clearQueue очищает очередь анимации, а параметр false в параметре jumpToEnd говорит о том, что нужно остановить текущую анимацию вместо немедленного ее завершения.

Модифицированная демка ...

http://jsfiddle.net/zGtBN/4/

...