jQuery .eq（）の隠し要素に問題がありますか？

Question

2つ以上のレイヤーを繰り返し処理して、1つずつフェードインして次のレイヤーにフェードインしようとしています。 最初は両方のレイヤーに "display：none;"というスタイルがあります。したがって、最初のメソッド呼び出しでは、私はfadeIn（）要素.eq（0） - その後、私は常にfadeOut（）.layer：visibleとfadeIn（）.eq（currentSlide）を呼び出します。 currentSlideは0で初期化され、呼び出しごとに反復されます。

思いがけないことだと思います。 アニメーションが開始されるたびに、最初の要素はに2回で消えます。アニメーションが期待どおりに実行された後は、でも要素の順序が異なります。マークアップの最初の要素は突然.eq（1）であり、2番目の要素はインデックス.eq（0）です。

ディスプレイを削除すると、レイヤーからは、すべてが完璧に機能します。可視性の設定に関係している必要があります。 （しかし.children（）の長さ（）は常にしかし私に正しい番号を与える...。）

マークアップ：

<div class="elements"> 
    <div class="layer"><img src="uploads/pics/one.png" /></div> 
    <div class="layer"><img src="uploads/pics/two.png" /></div> 
</div> 

coffescriptで書かれたjQueryプラグイン方式：

if element.find('.layer:visible').length > 0 and element.find('.elements').children().length > 1 
    element.find('.layer:visible').fadeOut -> element.find('.elements').children().eq(currentSlide).fadeIn() 
    else 
    element.find('.elements').children().eq(0).fadeIn() 

    # Iterate over slides or reset to zero if last one is reached 
    if currentSlide < element.find('.elements').children().length - 1 
    currentSlide++ 
    else 
    currentSlide = 0 

Answer 1

コールバックは、私がある前に、あなたは（デフォルトでは、400msの）遅延があります

element.find('.layer:visible').fadeOut -> 
    element.find('.elements').children().eq(currentSlide).fadeIn() 

書くときnvoked。その間に、currentSlideインクリメントコードが呼び出されます。 fadeOutが呼び出されたときにcurrentSlideの値ではなく、eq(currentSlide)がその値で呼び出されます。

これは、発生している動作を説明していますか？私はあなたがあなたのコーヒーのスクリプトに応じなければならないものだと思います

slide = currentSlide 
element.find('.layer:visible').fadeOut -> 
    element.find('.elements').children().eq(slide).fadeIn() 

Answer 2

私のHTMLマークアップを、代わりに試してみてください（私は間違って推測するなら、私に知らせて！）：

<div class="elements"> 
<div class="element"></div> 
    <div class="layer"><img src="uploads/pics/one.png" /></div> 
    <div class="layer"><img src="uploads/pics/two.png" /></div> 
</div> 
<div class="element"></div> 
    <div class="layer"><img src="uploads/pics/one.png" /></div> 
    <div class="layer"><img src="uploads/pics/two.png" /></div> 
</div> 
</div> 

のjQueryを：

var elementFirstKids = $('elements > element > layer:first-child'); 
    var elementOtherKids = $('elements > element > layer').not('elements > element > layer:first-child'); 
    elementFirstKids.fadeIn(); 
    elementOtherKids.fadeOut();