jQuery .eq() 隐藏元素的问题?
我正在尝试迭代两层或多层,淡出一层,然后淡入下一层。 一开始,两个图层的样式都是“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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
当您编写时,
在调用回调之前会有一个延迟(默认情况下为 400 毫秒)。在此期间,
currentSlide
增量代码被调用;因此,使用该值调用eq(currentSlide)
,而不是调用fadeOut
时使用currentSlide
的值。这可以解释您所经历的行为吗?尝试替换
When you write
there's a delay (by default, 400ms) before the callback is invoked. During that time, the
currentSlide
increment code is called; soeq(currentSlide)
is called with that value, rather than the value ofcurrentSlide
whenfadeOut
was called.Does this explain the behavior you're experiencing? Try substituting
我的 html 标记,我认为这是您根据咖啡脚本所拥有的(如果我推断错误,请告诉我!):
jQuery:
my html markup, which I think is what you have according to your coffee script (let me know if I inferred wrong!):
jQuery: