Изменить скорость приращения JavaScript во время цикла?

Question

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

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();
    }
}

Если вы наблюдаете за консолью, она считает слишком быстро и вторая анимация начинается раньше, чем должна.Есть ли способ замедлить приращение, чтобы вторая анимация выполнялась правильно?

Answer 1

анимация принимает полный параметр обратного вызова

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

Answer 2

Использовать обратный вызов:

var _count    = 10,
    _distance = 60;

(function anim(){
    if(_count !== 0){
        _count-= 1;
    }
    $imgOne.animate({
        bottom:'-=' + _distance + 'px'
    },1000,function(){
        anim(); 
    });
})();

Демо: http://jsfiddle.net/AlienWebguy/wkgYv/ (изменено направление анимации, чтобы вы могли видеть, что происходит в окне просмотра)