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

Question

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

Я знаю, что это может звучать глупо, поскольку, вероятно, это не тот способ, которым .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() - то есть параметром, который сообщает о немедленном завершении анимации.

Возможно, это как-то связано с функцией 'step', но кто-нибудь может объяснить мне такое поведение?

Answer 1

Вызов:

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

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

Answer 2

Вероятно, что-то вроде этого:

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

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