delay（）に従っていないJqueryのアニメーション

Question

私はのセットを持っています。その中には、いくつかの<article>要素があります。 <article>をクリックすると、すべてが1つずつ見えなくなります。

HTMLは次のとおりです。

<li> 
    <article class="classname"> 
    <article class="classname"> 
</li> 
<li>..</li> 
<li>..</li> 
<li>..</li> 

私が書いていたjqueryの機能だった：

$(".classname").click(function(){ 

     $(this).parent().parent().find('li').each(function(index, item){ 
      $(item).children().animate({ "left" : "-1000px" }).delay(2000); 

     }) 
    }) 

問題は、私は任意の物品の要素をクリックすると、すべての要素が一度にビューの外にスライドさせています。私が望むように一つ一つではありません。何が問題なの？

Answer 1

遅延機能は、キュー内の後続の項目の実行を遅らせる：あなたは千鳥期間でアニメーションの呼び出しの前に遅延を必要とする：

$(item).children().delay(index * 2000).animate({ "left" : "-1000px" }); 

Answer 2

delay()がキューに遅延を追加します。
の前にのアニメーションを挿入する必要があります。

Answer 3

あなたは（.animate前に）（あなたの.delayを呼び出す必要があります）：

$(item).children().delay(2000).animate({ "left" : "-1000px" }); 

Answer 4

の項目には、各記事のdelay異なるを設定する必要があります一つ一つをアニメーション化する：

$(item).children().delay(index * 2000).animate({ "left" : "-1000px" }); 

更新

おそらく、このようなsomethignを探しています：

$(".classname").click(function(){ 
    $(".classname").each(function(index, item){ 
     $(this).delay(index * 100).animate({ "left" : "-1000px", opacity: "0" }, 500) 
    }) 
}) 

http://jsfiddle.net/L3YS3/1/

Answer 5

ファーストコール.delay()、その後、アニメーション機能：

$(item).children().delay(2000).animate({ "left" : "-1000px" }); 

非常に簡単な例：この位置にhttp://jsfiddle.net/EzMzy/