бесконечный цикл с jQuery .stop()

Question

Я обманывал stop() jQuery и заканчивал бесконечным циклом. Идея была (просто экспериментирована), чтобы создать анимацию с условием «шаг», которая проверит, достигло ли свойство css элемента определенное значение и в этом случае остановит анимацию прямо на своих дорожках, очистив очередь AND завершая анимацию сразу.

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

Вот код:

$("#element").animate({ 
    "width": "500px", 
    "height": "130px" 
}, { 
    "duration": 850, 
    "step": function() { 
     var currentWidth = $(this).width(); 
     if(currentWidth >= 295) $(this).stop(true, true); 
    } 
}).slideUp(700); 

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

Возможно, что-то связано с функцией «шаг», но может ли кто-нибудь объяснить мне такое поведение?

Answer 1

Это, вероятно, делать что-то вроде этого:

1. Запуск анимации кадров
2. шаг Запуск функции
3. Шаг условие истинного
4. Остановить анимацию, но закончить его сразу
5. Выполнить последний кадр анимации для финишная анимация
6. Функция шага хода (возврат к шагу 2)
7. Установить кадр анимации в комплекте (не достигли)
8. Набор анимации в комплекте (не достигли)

Если вы можете проверить, если этап происходит в последнем кадре анимации, вы можете принять это во внимание при вызов stop().

Answer 2

Призвание:

$(this).stop(true, true); 

будет выполнять функцию step для самого последнего шага. В течение этого звонка вы снова вызываете стоп. Анимация не удаляется из очереди до завершения этой функции step. Поскольку анимация все еще находится в очереди, вызов stop снова выполняет последние step ... и далее.