Question

I have a somewhat difficult animation to do in JQuery, and I haven’t found a good way to handle it. I have a mobile site with a scene on the screen which displays a series of choices. When a choice is made, the choices slide off screen, and simultaneously a new scene of a city is brought in (it’s supposed to simulate driving) – and this scene, instead of stopping in the center of the screen, it passes all the way through the opposite end of the screen. The problem is, when it gets to the center, I want to trigger a new div to come in just behind it, matching the speed, etc, so everything appears in synch.

If I set the animation for the city scene to be in two parts, once to the center where it could trigger the new choice scene coming in, and once to go off screen, there is a noticeable jerk. And I haven’t found a way to trigger a delay, because at the end of the delay I need to make a call to a custom function, not a jquery function. So this is my code:

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

Use setTimeout() right before your animation to trigger the second animation halfway through the first animation.

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