JQuery анимирует разрывы с быстрым движением мыши!

Question

вот проблема jQuery, которая преследует меня в течение долгого времени, и я хочу, наконец, найти решение. Есть этот код:

http://jsfiddle.net/MDfgd/20/

Если я быстро проведу мышью по всем объектам, анимация прерывается, поскольку она не разворачивается полностью. Как я мог сделать это, чтобы этого не случилось?

Я попытался «остановить (true, true)», но это приводит к потере плавности анимации, поскольку она переходит к концу очереди анимации.

Спасибо.

Answer 1

Я думаю, что он имеет в виду, что, если он быстро перемещает мышь вперед и назад, он не хочет, чтобы анимация складывалась бесконечно.Однако выполнение .stop() приведет к немедленной остановке текущей анимации, вместо того, чтобы позволить текущей анимации продолжить свое движение и удалить rest анимаций из очереди.Выполнение .stop(true, true) приведет к переходу к концу текущей анимации и продолжению оттуда.

Мне кажется, что ОП хочет, чтобы текущая анимация проходила, и после этого запускала следующую анимацию,вместо того, чтобы накапливать анимацию бесконечно в случае быстрого движения мыши.

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

http://jsfiddle.net/ZrdV6/

РЕДАКТИРОВАТЬ

Хорошо, после разъяснения я привел другой пример.Это в основном предотвращает искажение высоты с помощью stop() на элементе, который анимируется с помощью slideDown() и slideUp().

Хитрость заключается в том, чтобы сделать анимацию самостоятельно с помощью .animate(), исамостоятельно отслеживать исходную высоту.

http://jsfiddle.net/YmwZa/1/

Answer 2

Я немного озадачен тем, что вы имеете в виду под "потерять свою гладкость" - для меня это все еще выглядит гладко:

Answer 3

$(document).ready(function(){

    $("ul.first li").mouseenter(function(){
        $("ul", this).slideDown();
    });
    $("ul.first li").mouseleave(function(){
        $("ul", this).slideUp();
    });

});

Answer 4

Я использовал .stop( true, true ), и, похоже, он работает нормально.

Анимация все еще выглядит плавно.

Демонстрация: http://jsfiddle.net/tomgrohl/Pqz9s/