Остановить укладку анимации jQuery

Question

У меня есть окно параметров, которое отображается в правом верхнем углу веб-страницы. Его непрозрачность установлена ​​на 10%, чтобы не мешать пользователям. Когда они наводят курсор мыши (указатель мыши), я использую jQuery, чтобы затемнять его и перемещать содержимое (и наоборот при наведении мыши).

Если они делают это неоднократно, хотя анимация складывается, и вы можете иногда оставаться в ситуации, когда ваша мышь стоит на месте, но окно вращается.

Как мне обойти эту ситуацию?

Вот как я сейчас настраиваю анимации

$("#dropdown").mouseenter(function() { 
    $(this).fadeTo('fast',1);
    $("#options").slideDown();
});

$("#dropdown").mouseleave(function() { 
    $(this).fadeTo('fast',0.1);
    $("#options").slideUp();
});

Примечание. Я использую только jQuery, а не другие плагины.

Answer 1

Вызовите stop , чтобы прекратить любую существующую анимацию перед началом новой. Вам также следует использовать hover вместо mouseenter / mouseleave.

$("#dropdown").hover(function() {  
    $(this).stop().fadeTo('fast',1); 
    $("#options").stop().slideDown(); 
}, function() {  
    $(this).stop().fadeTo('fast',0.1); 
    $("#options").stop().slideUp(); 
});

Answer 2

Вы можете использовать метод stop , который остановит анимацию и очистит очередь анимации.

$("#dropdown").mouseenter(function() { 
    $(this).stop(true).fadeTo('fast',1);
    $("#options").stop(true).slideDown();
});

$("#dropdown").mouseleave(function() { 
    $(this).stop(true).fadeTo('fast',0.1);
    $("#options").stop(true).slideUp();
});

Вы также можете посмотреть на плагин hoverintent

Answer 3

Проблема с использованием остановки перед fadein(), например, в этом примере:

$("#button").hover(function () {
    $("#light").stop().fadeIn();
  },
  function () {
    $("#light").stop().fadeOut();
});

Это означает, что stop () будет иметь остановку затухания с любой непрозрачностью, к которой исчез элемент, когда изменяется состояние наведения, и будет начинаться с той же непрозрачностью, когда снова зависает.

Результатом является то, что множественные быстрые зависания в конечном итоге исчезнут с элемента и не исчезнут снова.

Answer 4

Вы можете использовать stop метод там, я думаю.

Остановить текущую анимацию на подобранных элементах.