Синхронизация анимации или вызов в середине анимации

Question

У меня есть довольно сложная анимация в JQuery, и я не нашел хорошего способа справиться с этим. У меня есть мобильный сайт со сценой на экране, которая отображает ряд вариантов. Когда выбор сделан, выбор сдвигается с экрана, и одновременно появляется новая сцена города (она должна имитировать движение) - и эта сцена, вместо остановки в центре экрана, проходит до конца. через противоположный конец экрана. Проблема в том, что, когда он добирается до центра, я хочу вызвать новый div, чтобы он шел сразу за ним, соответствуя скорости и т. Д., Чтобы все отображалось синхронно.

Если я устанавливаю анимацию для городской сцены, состоящую из двух частей, один раз в центр, где она может вызвать появление новой сцены выбора, и один раз, чтобы уйти с экрана, появляется заметный рывок. И я не нашел способа вызвать задержку, потому что в конце задержки мне нужно вызвать пользовательскую функцию, а не функцию jquery. Так вот мой код:

Driving Scene (called when choices begin animating out):

$('#interlude').animate({marginLeft: -viewportW + "px"},3000,'linear',function(){
    $('#interlude').remove();
    displayScene(sceneID); //need to figure out how to call this at the halfway point
});

Answer 1

Используйте setTimeout () прямо перед анимацией, чтобы запустить вторую анимацию в середине первой анимации.

var animateTime = 3000;
setTimeout("displayScene(" + sceneId + ")", animateTime / 2);
$('#interlude').animate({marginLeft: -viewportW + "px"},animateTime,'linear',function(){
    $('#interlude').remove();
});