jQuery：アニメーションスタックでの遅延の使用方法

Question

アニメーションシーケンスが完了した後に、コールバックを実行するためにDeferredsを使用する方法を決定する際に問題があります。アニメーション/フェード/スライドの最後に.promise()を使用することはできますが、複数のものをアニメーション化しようとすると、どのように動作させるかわかりません。

これまでのコードは以下の通りです：

var delayTime = 0; 
$stack = $('li'); // returns five list items. 
$stack.each(function(index, element) { 
    $(element).delay(delayTime).animate({ opacity: 0.3 }, 500, function() { 
     $(element).animate({ opacity: 1 }, 500); 
    }); 
    delayTime += 1250; 
}); 

すべての要素がフェードイン/フェードアウトした後、最後にコールバックを実行します。ここで

Answer 1

<script src="js/jquery/jquery-1.7.1.js"></script> 

<ul> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
    <li>5</li> 
</ul> 

<script> 
    $(function() { 
     var delayTime = 0; 
     var $stack = $("li"); 
     $stack.each(function(index, element) { 
      $(element) 
       .delay(delayTime) 
       .animate({ opacity: .3 }, 500) 
       .animate({ opacity: 1 }, 500); 
      delayTime += 1250; 
     }).promise().done(function() { 
      $stack.parent().append("<li>Hello!</li>"); 
     }); 
    }); 
</script> 

Answer 2

は、カスタム関数キューを設定するデフォルトのjQueryの方法です：

articleDiv.queue("createPages",function(next){articleDiv.html(loader);next()});//step 1 
articleDiv.delay(800,"createPages");//add delay after step 1 
articleDiv.queue("createPages",function(next){articleDiv.html(content);next()});//step 2 
articleDiv.delay(800,"createPages");//add delay after step2 
articleDiv.dequeue("createPages");//process the entire queue 

いくつかのグラウンドルール：上記の例ではarticleDivたVAR articleDiv = $（ '＃のthe_container_of_the_animation'）とcreatePagesは、作成するキューの名前です。私はかなりそれをカバーすることを願っています。