Question

I am running a simple loop:

    var c=0;

while(c<count){
    theimg = $container.find('.img'+c+'');

    $thisX = theimg.css('top');

    theimg.css({
        'top':'500px',
        'display':'block',
        'opacity':'0'
    });

    theimg.animate({
        'opacity':'1',
        'top':$thisX
    },800,'linear',function(){
        c++;
    });
}

I have tried this as while and for and both crash the browser. Which makes me think it is creating an infinite loop.

I want the loop to run each element and once the animation is complete proceed to the next. Any help would be great 🙂

Answer 1

try this:

var c=0;

function nexStep(){
  if (c>=count) {
    return;
  }
  var theimg = $container.find('.img'+c+'');
  var $thisX = theimg.css('top');
  theimg.css({
        'top':'500px',
        'display':'block',
        'opacity':'0'
    });

    theimg.animate({
        'opacity':'1',
        'top':$thisX
    },800,'linear',function(){
        c++;
        nexStep();
    });
}
nexStep();