Функция jQuery mouseleave не запускается при быстром перемещении мыши

ProgramBox

Функция jQuery mouseleave не запускается при быстром перемещении мыши

Post author:admin
Запись опубликована:22 апреля, 2023
Post category:Вопросы по программированию

#jquery #jquery-animate

#jquery #jquery-анимировать

Вопрос:

У меня есть временная шкала с маленькими кнопками на ней, которые при наведении курсора мыши перемещаются вверх или вниз, а затем отображают заголовок. Когда мышь уйдет, заголовок должен исчезнуть, а значок переместиться обратно. Это работает, но с кодом, который я использую, если мышь перемещается слишком быстро, она не обнаруживает, что мышь ушла. Как я могу это исправить?

P.S, единственная причина, по которой я использую ввод / вывод мыши, заключается в том, что я думаю, что мне нужно было использовать live (), поскольку мои элементы добавляются динамически после загрузки документа.

     $('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){
    $(this).animate({
        top:25
    }, 200, function(){
        $(this).find('.caption').stop(true, true).fadeIn(200);
    });     
}).live('mouseleave',function(){
    $(this).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){
        $(this).parents('li').animate({
            top:30
        },200);         
    });
});

1. когда вы говорите, что она не обнаруживает mouseleave — если вы замените функцию mouseleave на alert('test') , это вообще не сработает?

2. О, это так : ( Заголовок просто не исчезает, и вывод не анимируется >.<

3. Есть идеи, почему это может происходить?

Ответ №1:

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

Итак, новый план!

Попробуйте это:

 $('#about-me .progress-bar .progress .notes li.personal').live('mouseenter',function(){
    $(this).animate({
        top:25
    }, 200, function(){
        $(this).find('.caption').stop(true, true).fadeIn(200);
    });     
}).live('mouseleave',function(){
    $(this).stop(true, true).find('.caption').stop(true, true).delay(200).fadeOut(200,function(){
        $(this).parents('li').animate({
            top:30
        },200);         
    });
});

Я не нажал, что вы запускаете анимацию для двух отдельных объектов! Чувствую себя более уверенно в этом!

1. К сожалению, они все еще застревают. Они не срабатывают, если я медленно перемещаю мышь.

2. попробуйте изменить .stop(true, true).fadeIn на .stop().fadeIn — это, кажется, исправило поведение в моем тесте — возможно, есть сбой, хотя

3. Ты гений! Избавило меня от лишней головной боли. Могу я спросить, как вы добрались до этого исправления? Я знаю, что вы добавили stop() перед find (), но почему? Еще раз спасибо, ценю это.

4. Вау! рад, что это сработало! Итак, что происходило, так это то, что длительность анимации все еще была активна, когда мышь покинула элемент, скажем, с оставшимся максимум 190 мс. Следовательно, обратный вызов этой функции выполнялся бы до завершения, а вызов .stop(true, true) удаляет все функции, поставленные в очередь (которые в данном случае являются завершением и его обратным вызовом). Поэтому, добавляя stop() к $(this) элементу, мы предотвращаем запуск первоначального обратного вызова! По крайней мере, так это работает в моем представлении: D

Ответ №2:

Я видел это раньше. Когда вы перемещаете мышь достаточно быстро, она просто переходит на новое место и не запускает действие mouseleave. вот мое решение, использующее совсем немного jQuery. По сути, пока вы наводите курсор на вывод, вам нужно привязать прослушиватель к окну, которое отслеживает любое движение мыши и проверяет, что вы все еще наведены на вывод. Я не думаю, что вы хотели бы, чтобы этот прослушиватель работал все время, поэтому я попросил его отвязать себя.

$(".pin").live("mouseenter", функция (событие) {
 var pin = $(event.target);
 // показать заголовок 
 закрепите.addClass("зависший"); 

 $(window).bind("перемещение мыши", функция (событие) {
 var target = $(событие.target);
 if (!target.hasClass("завис")) {
 // скрыть заголовок 
 $ (".завис").removeClass("завис");
 $(window).unbind("перемещение мыши");
 }
 }
}