jquery - Jquery ループの問題、次のループの前にタスクを完了する

Question

私は単純なループを実行しています:

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

私はこれを while と for として試しましたが、両方ともブラウザをクラッシュさせました。これは、無限ループを作成していると思います。

ループで各要素を実行し、アニメーションが完了したら次の要素に進みます。どんな助けでも素晴らしいでしょう:)

Answer 1

これを試して：

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