Анимация полных огней немедленно

В моем diag1 коде я бы ожидал, что diag1 div будет медленно увеличиваться - один раз после окончания каждой анимации. Вместо этого он сразу же переходит в 20, а анимация отстает. Я думал, что смысл аргумента функции в .animate в .animate функции ПОСЛЕ завершения анимации. Может ли кто-нибудь определить мою проблему?

<title>TST</title> <div> <div id="ui"> <button id="play_button">Play</button> <div> <div> <div id="s6"> <div>TEST</div> </div> </div> </div> </div> <div id="diag1">Diagnostic 1: </div> </div>
2 ответа

Удалите () на scrollManager. () является оператором вызова функции в JS.

$('#s6').animate({'padding-left': '-=5%'}, 1000, 'linear', scrollManager);


Это связано с тем, что внутри scrollLeft и внутри вызова функции animate ожидаемый аргумент является обратным вызовом. Однако вы undefined а не обратный вызов.

$('#s6').animate( {'padding-left': '-=5%'}, 1000, 'linear', scrollManager()
);

Использование scrollManager() будет использовать возвращаемое значение из этого вызова функции в качестве обратного вызова. Поскольку нет возвращаемого значения, undefined присваивается значение обратного вызова.

scrollManager() что был вызван scrollManager(). Что в свою очередь снова вызывает scrollLeft (в основном рекурсивный вызов). Эта рекурсия происходит до тех пор, пока if(PLAY==true && CURRENT_TIME < END_TIME) будет ложным.

Значение обратного вызова предполагает использование дескриптора функции или анонимной функции, поэтому вместо этого вы должны использовать

$('#s6').animate( {'padding-left': '-=5%'}, 1000, 'linear', scrollManager
);

licensed under cc by-sa 3.0 with attribution.