JS Fiddle 位于此处:http://jsfiddle.net/8nqkA/2/
HTML
<div>
<div class="show">Test 1</div>
<div class="hidden">Test 2</div>
<div class="hidden">Test 3</div>
<div class="hidden">Test 4</div>
</div>
jQuery
$(document).ready(function() {
myFunc($(".show"));
});
function myFunc(oEle)
{
oEle.fadeOut('slow', function(){
if (oEle.next())
{
oEle.next().fadeIn('slow', function(){
myFunc(oEle.next());
});
}
else
oEle.siblings(":first").fadeIn('slow', function(){
myFunc(oEle.siblings(":first"));
});
});
}
CSS
.hidden {
display: none;
}
尝试让它在完成后循环回到测试 1,但不起作用。只是想让一切重新开始,这有什么问题吗?
最佳答案
if (oEle.next()){ // This needs to be oEle.next().length
oEle.next().fadeIn('slow', function(){
myFunc(oEle.next());
});
}else{ // You should wrap this in a block
oEle.siblings(":first").fadeIn('slow', function(){
myFunc(oEle.siblings(":first"));
});
}
我们测试 .length
的原因是因为 .next()
与大多数 jQuery 方法一样,返回 jQuery - 无法直接对其进行测试。您可以将其视为一个数组,因此 .length
属性为我们提供了当前选择中有多少个元素。
我们还应该将您的 else
代码包装在一个 block ({..}
) 中,因为以下代码跨越多行。
关于jQuery 淡入和淡出循环回到 :first sibling,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14994212/