forループ内でjqueryをアニメーション化する

Question

私は何がうまくいかないのか分からないアニメーションを持っています。私のフェードイン/アウトの遅延は尊重されません。私はタイルをフェードアウトし、新しいタイルに置き換えてフェードインしようとしています。これはこの場合4回実行されますが、それによってforループが変わる可能性があります。

ここに私のコードの短縮版があります。クリックアクションでは、4枚のタイルは新しいタイルに置き換えられますが、アニメーションには遅延が存在しない、でも最初のアニメーションの2番目のパラメータがerror.should機能である2000年

for (var i = 0; i < animation.length; i++) { 
    animation[i]['old'] 
     .animate({ opacity: 0 }, { 
      duration: 500, 
      queue: function() { 
       jQuery(this) 
        .replaceWith(self.template(animation[i]['new'])) 
        .css({ opacity: 0 }) 
        .animate({ opacity: 100 }, 2000); 
      } 
     }); 
} 

Answer 1

で。

Answer 2

タイルをアニメーション化する関数を作成して問題を解決しました。私の問題の原因は、私のフェードアニメーションは非同期で、私のforループは同期していました。関数内にアニメーションをカプセル化することで、アニメーションはやや同期した形で実行できました。ここに私の大まかな解決策があります。