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

发布于 2024-11-19 18:39:29 字数 1202 浏览 1 评论 0原文

我正在尝试迭代两层或多层,淡出一层,然后淡入下一层。 一开始,两个图层的样式都是“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

I'm trying to iterate over two or more layers, fading one out and the next in.
At the start, both layers have the style "display:none;" - therefore, at the first method call, I just fadeIn() element .eq(0) - after that, I always fadeOut() .layer:visible and fadeIn() .eq(currentSlide).
currentSlide was initialized with 0 before and gets iterated at each call.

A no-brainer, one would think.
But here is what happens:
Whenever the animation starts, the first element gets faded in twice - after that the animation runs as expected, but the elements are in different order. The first element in the markup suddenly is .eq(1) and the second one is at index .eq(0).

If I remove display:none; from the layers, everything works perfect - it must be related to the visibility settings and maybe a selector not seeing the layers?
(But .children().length() always gives me the correct number though...)

The markup:

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

The jQuery plugin method written in coffescript:

   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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

滥情空心 2024-11-26 18:39:29

当您编写时,

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

When you write

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

there's a delay (by default, 400ms) before the callback is invoked. During that time, the currentSlide increment code is called; so eq(currentSlide) is called with that value, rather than the value of currentSlide when fadeOut was called.

Does this explain the behavior you're experiencing? Try substituting

slide = currentSlide
element.find('.layer:visible').fadeOut ->
  element.find('.elements').children().eq(slide).fadeIn()
迷荒 2024-11-26 18:39:29

我的 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();

my html markup, which I think is what you have according to your coffee script (let me know if I inferred wrong!):

<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();
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文