Прервать события JS
 

К примеру у нас есть страница:

gubahasport59.ru/uslugi/obuchenie-kataniu.php

Там есть блок с инструкторами, при наведении на которые всплывает блок с информацией.

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

Нужно, чтобы при наведении на блок, все прежние события, связанные с данными блоками ПРЕКРАЩАЛИСЬ и всплывал только последний из них.

Как это реализовывается ?

Сейчас код следующий:

$('.instructors .block').mouseenter(function(){
        var $this = $(this),
            $description = $this.find('.description');

        $description.animate({top: 0}, 500, function(){
            $this.mouseleave(function(){
                $description.animate({top: 330 + 'px'}, 500);
            });
        });
    });

Slays,
перед animate stop

.stop(true,true).animate

и присваивать mouseleave бесконечно ненадо

Slays,

$(".instructors .block").on("mouseenter mouseleave",
 function(event){
         $(".description",this).stop(true,true).animate({top: event.type == "mouseenter" ? 0 : 330}, 500);
    }
)