jQuery .eq() 隐藏元素的问题？

Question

我正在尝试迭代两层或多层，淡出一层，然后淡入下一层。 一开始，两个图层的样式都是“display:none;” - 因此，在第一个方法调用时，我只是 fadeIn() element .eq(0) - 之后，我总是 fadeOut() .layer:visible 和 fadeIn() .eq(currentSlide)。 currentSlide 之前用 0 初始化，并在每次调用时迭代。

人们会想，这是理所当然的事情。 但发生的事情是这样的： 每当动画开始时，第一个元素就会淡出两次 - 之后动画按预期运行，但元素的顺序不同。标记中的第一个元素突然变为 .eq(1)，第二个元素位于索引 .eq(0)。

如果我删除显示：无；从图层来看，一切都很完美 - 它必须与可见性设置有关，也许选择器看不到图层？ （但是 .children().length() 总是给我正确的数字...）

标记：

<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

当您编写时，

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

在调用回调之前会有一个延迟（默认情况下为 400 毫秒）。在此期间，currentSlide 增量代码被调用；因此，使用该值调用 eq(currentSlide)，而不是调用 fadeOut 时使用 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();