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

【问题标题】：jQuery .eq() issue with hidden elements?jQuery .eq() 隐藏元素的问题？
【发布时间】：2011-07-12 22:03:11
【问题描述】：

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

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

如果我删除 display:none;从图层来看，一切都很完美 - 它必须与可见性设置有关，也许是选择器看不到图层？（但是 .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

【问题讨论】：

标签： jquery coffeescript

【解决方案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()

【讨论】：

太棒了。而已！我添加了一个 iterate() 方法并在fadeIn() 之后将其作为回调调用。现在它完美无缺。非常感谢。

【解决方案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();

【讨论】：