Как предотвратить наращивание очереди анимации с двойной анимацией?

Question

Я смотрел этот учебник здесь, чтобы предотвратить наращивание анимации:

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

Моя ситуация: Я делаю двойную анимацию, как показано ниже, и хотел бы предотвратить создание анимации. Так как у меня 2 анимации, кажется, он игнорирует .stop (). Что можно сделать, чтобы предотвратить это? Я пробовал .stop () на обоих .animate, и если я делаю это, он прекращает анимацию ...

$(document).ready(function() {
$('#element').hover(function() {
    $(this).stop()
        .animate(
            { left: 200 }, {
                duration: 'slow',
            })
        .animate(
            { top: 200 }, {
                duration: 'slow',
            });
} , function() {
    $(this).stop()
        .animate(
            { left: 0 }, {
                duration: 'slow',
            })
        .animate(
            { top: 0 }, {
                duration: 'slow',
            });
});

});

Любая помощь будет высоко оценена !!

Answer 1

Использование:

$(this).stop(true);

С stop():

Останавливает все запущенные в данный момент анимации по всем указанным элементы.

Примечание:"в данный момент запущено" не ставится в очередь, как вы испытываете. Для этого укажите параметр:

clearQueue (Optional) Boolean 

логическое (true / false), которое при установке в true очищает очередь анимации, эффективно останавливая все в очереди анимации.

Также вы можете указать второй параметр, который будет ярлыком для завершения анимации, а не отменять его, если это поможет.

Answer 2

Вы должны использовать .finish(), который не нарушит макет.