Задержка jQuery fadeIn из-за нежелательного поведения

Question

Задержка jQuery fadeIn из-за нежелательного поведения

0

Как заставить мое.right-меню DIV исчезать только через пару секунд, когда мышь витает в его родительском.right-menu-background? Дело в том, что когда вы быстро перемещаете курсор и начинаете, прямое меню DIV снова появляется много раз.

Как задержать анимацию за несколько мс?

Здесь код:

$(function(){
     $(".right-menu-background").hover(function(){
          $(this).find(".right-menu").fadeIn();
          }

,function(){
     $(this).find(".right-menu").fadeOut();
     }
);        
});

freewheeler 21 окт. 2013, в 12:06

Источник

Теги:

javascript

jquery

delay

fadein

3 ответа

1

Используйте функцию stop() перед замиранием вызовов ...stop(true, true)

Если эти два параметра установлены в true, очередь анимации будет очищена, и последняя анимация будет воспроизведена, это вызовет странный эффект

$(this).find(".right-menu").stop(true, true).fadeIn();

Stphane 21 окт. 2013, в 08:45

0

Используйте .delay().

Вот код:

$(function(){
 $(".right-menu-background").hover(function(){
      $(this).find(".right-menu").delay(800).fadeIn(400);
      },function(){
 $(this).find(".right-menu").fadeOut(400);
 });        
});

Проверьте демо: http://jsfiddle.net/Mju7X/

Joke_Sense10 21 окт. 2013, в 07:29

0

Этот код делает то же самое, он просто работает в более длительные моменты.
freewheeler 21 окт. 2013, в 09:48
0

Проверьте обновленный код, и я также загрузил рабочую скрипку.
Joke_Sense10 21 окт. 2013, в 10:05

Ещё вопросы

Этот код делает то же самое, он просто работает в более длительные моменты.
Проверьте обновленный код, и я также загрузил рабочую скрипку.

Arun P Johny · Accepted Answer · 2013-10-21T06-50-00.000Z

легко исправить это .stop()

$(function () {
    $(".right-menu-background").hover(function () {
        $(this).find(".right-menu").stop(true, true).fadeIn();
    }, function () {
        $(this).find(".right-menu").stop(true, true).fadeOut();
    });
});

использование таймера

$(function () {
    $(".right-menu-background").hover(function () {
        var el = $(this).find(".right-menu");
        var timer = setTimeout(function(){
            el.stop(true, true).fadeIn();
        }, 500);

        el.data('hovertimer', timer);
    }, function () {
        var el = $(this).find(".right-menu");
        clearTimeout(el.data('hovertimer'))
        el.stop(true, true).fadeOut();
    });
});

Работает как шарм, отличное решение, большое спасибо!