Question

我试图通过循环来循环遍历一堆编号为1到4的类编号的div。它某处出错了。谢谢你的帮助！

var div = 1;
while (div < 5){
    $("." + div).fadeIn().delay(4000).fadeOut(function(){
        div++;
    });
}

Answer 1

在div函数之外增加fadeOut。

另请参阅this post了解CSS类名称的外观，从数字开始不是其中之一。

我会考虑为你想要应用它的div使用单个类名，而不是明确引用每个div。

编辑在这种情况下，我会创建一个与其他所有内容分开的div集合。将其传递给对该列表中第一项执行操作的函数。在fadeOut函数中，再次调用相同的函数，传递列表的其余部分。当没有更多元素时，不通过调用函数来终止。基本上是递归地做。

同样的事情可以迭代完成，我只是认为递归版本更直观。

Answer 2

你不能让DIV类以数字开头。它应该是别的东西。

如果你想要所有以特定类名开头的div，你可以使用它，但是会在同一时刻完成它。：

$("[class^=fader]").fadeIn().delay(4000).fadeOut();

如果你想在彼此之后做这件事。试试这个：

$("[class^=fader]").each(function(index){
    $(this).delay(index * 4000).fadeIn().delay(4000).fadeOut();
});

Answer 3

您正在递增div内部fadeOut回调，该回调仅在fadeOut完成时执行，并将其移出现场。试试这个

var div = 1;
while (div < 5){
    $("." + div).fadeIn().delay(4000).fadeOut(function(){

    });
    div++;
}

Answer 4

你的div++不应该在匿名函数中调用，而是在你的函数调用之外，就像这样

var div = 1;
while (div < 5){
    $("." + div).fadeIn().delay(4000).fadeOut();
    div++;
}

Answer 5

设置你喜欢淡化课程的所有div。

<div class="fadeClass">

// Select your divs
var divs = $("div#fadeClass");
// fade them all in/out
divs.each(function(index, value) {
   $(this).fadeIn().delay(4000).fadeOut(function(){});
}

http://api.jquery.com/jQuery.each/

Answer 6

您可以逐步延迟fadeIn（）：

HTML：

<div class="fade" style="display:none">Div 1</div>
<div class="fade" style="display:none">Div 2</div>
<div class="fade" style="display:none">Div 3</div>
<div class="fade" style="display:none">Div 4</div>

JavaScript的：

$(".fade").each(function(i){
    $(this).delay(4000 * i).fadeIn().delay(4000).fadeOut();
});

演示：http://jsfiddle.net/bN28x/2/

Answer 7

jQuery有一个名为“each”的函数，可以为这个函数派上用场。

以下是jsfiddle的实例： http://jsfiddle.net/XGSTP/

似乎Niels刚刚发布了类似的答案，但我希望添加jsFiddle有帮助。

简而言之，我不会费心使用编号div而且我不确定这是否是好的做法。使用“each”遍历div：

var delayAmount = 1000; //amount of delay between each div.
$("div.fade").each(function(index){
    $(this).show().delay(index * delayAmount).fadeOut();
});

JavaScript jQuery while循环通过div

7 个答案: