Как остановить повторение функций jQuery mouseenter() и mouseleave()?

Question

Проблема: когда я наводил указатель мыши на блок div, элементы списка ul отображаются с fadein, и когда я отвлекаю мышь от блока div, элементы списка ul исчезают, и когда я делаю то же действие быстрые 5,6,7 или более раз, и когда я ничего не делаю с помощью мыши, функции mouseenter() и mouseleave() повторяются из-за продолжительности затухания. Я хочу, чтобы, например, если функция mouseenter() была запущена, другая функция mouseleave() не запускалась, даже если у пользователя была отвлечена мышь от блока div, функция mouseleave() должна ждать, пока функция mouseenter() не будет закончил свою работу, а затем можно запустить функцию mouseleave() и т. д. Как это сделать?

Демо: https://jsfiddle.net/qcvL1xjg/

HTML:

<div class="block"></div> 
<ul class="responser"> 
    <li>Home</li> 
    <li>Product</li> 
    <li>About</li> 
</ul> 

CSS:

.block { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 

JQuery:

$(document).ready(function() { 
    $('.responser').hide(); 

    $(".block").mouseenter(function() {  
      $('.responser').fadeIn(1250);   
    }); 

    $('.block').mouseleave(function() {  
      $('.responser').fadeOut(1250);   
    }); 
}); 

Answer 1

Вы можете использовать, .stop() метод STO pping текущей анимации.

$(".block").hover(
    function() { 
     $('.responser').stop().fadeIn(1250); 
    }, function() { 
     $('.responser').stop().fadeOut(1250); 
    }); 

или

$(".block").mouseenter(function() {  
      $('.responser').stop().fadeIn(1250);   
    }); 

    $('.block').mouseleave(function() {  
      $('.responser').stop().fadeOut(1250);   
    }); 

Fiddle