Question

I am trying to build a script so that the second portion of an animation will only begin once the first is finished. I am attempting to accomplish this with an if statement and incrementing a variable after each loop. Theoretically, only after the first statement is finished counting through should the second begin.

URL: http://alexanderdiner.com/titletest/

function anim1() {
    if (i < cnt) {
        $imgOne.delay(1000).animate({bottom : '-=60px'}, 1000);
        i += 1;
        setTimeout(function() {anim1()}, 1000);
        console.log("The number is " + i);
    } else {
        cb();
    }
}

If you watch the console, it counts through too quickly and the second animation begins sooner then it should. Is there anyway to slow down the incrementation so the second animation executes correctly?

Answer 1

animate takes a complete callback paramter

 $imgOne.delay(1000).animate({
    bottom : '-=60px'
  }, 1000, function() {
    anim1();
 });