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()