Javascript 使用jquery以延迟方式逐个加载div

这是我的全部代码…我想做的是拥有-。当DOM就绪时，第一个div显示在页面上，第二个div在延迟后显示，然后是第三个div，以此类推直到150

当前代码的问题是，整个150 div在一个小延迟后立即加载

我的代码-

尝试使用为每次迭代自动指定的索引参数，以线性方式延长延迟：

$('div.dashdiv').each(function(i) {
   $(this).delay(1000*i).fadeIn(1850);
});

此外，在注释之后，应更改div元素的样式以使其隐藏：

dashdiv先生{ 显示：无； ... } 尝试使用为每次迭代自动指定的索引参数，以线性方式延长延迟：

$('div.dashdiv').each(function(i) {
   $(this).delay(1000*i).fadeIn(1850);
});

此外，在注释之后，应更改div元素的样式以使其隐藏：

dashdiv先生{ 显示：无； ... } 您可以使用：

Html:

演示在

您可以使用：

Html:

---

演示在

这里有一种方法可以在上一个div完成后延迟和淡入div。 它使用fadeIn回调移动到数组中的下一个div：

// hide all
$('.dashdiv').hide();

// fade in each div one by one
divs = document.getElementsByClassName('dashdiv');
(function fade(i){
    if(i < divs.length){
        $(divs[i]).delay(1000).fadeIn(1850, function(){
            fade(++i);
        });
    }
})(0);

---

演示：

这里有一种方法，可以在上一个div完成后延迟并淡入div。 它使用fadeIn回调移动到数组中的下一个div：

// hide all
$('.dashdiv').hide();

// fade in each div one by one
divs = document.getElementsByClassName('dashdiv');
(function fade(i){
    if(i < divs.length){
        $(divs[i]).delay(1000).fadeIn(1850, function(){
            fade(++i);
        });
    }
})(0);

---

演示：

您面临的问题是，jQuery延迟只能在fx队列上链接，这一点没有人提到。因此，在隐藏后使用它将不起作用。要使其正常工作，一个快速修复方法是使用效果来代替隐藏，即：

---

您所面临的问题（没有人提到）是jQuery延迟只能在fx队列上链接。因此，在隐藏后使用它将不起作用。要使其正常工作，一个快速修复方法是使用效果来代替隐藏，即：

---

代码的唯一问题是它首先一次加载整个150个div，然后逐渐消失，然后开始逐个添加one@swapnesh以你为榜样。要实现您所描述的，只需将display:none添加到.dashdiv的样式规则中。这也意味着隐藏方法在这里是多余的。@swapnesh根据编辑了答案。代码唯一的问题是它首先一次加载整个150 div，然后逐渐消失，然后开始逐个添加one@swapnesh以你为榜样。要实现您所描述的，只需将display:none添加到.dashdiv的样式规则中。这也意味着隐藏方法在这里是多余的。@swapnesh根据编辑的答案进行了编辑。如果您已经在使用jQuery fadeIn函数，那么使用vanilla JS document.getElementsByClassName有什么意义？为什么重要？如果愿意，您可以轻松地在它的位置使用$'.dashdiv'。对我来说，它更具可读性，这很重要。这叫做一致性。当你们作为一个团队的一部分工作时，你们将学会不以“对我”的心态思考。您已经在使用一个库来介于您和JS函数之间。如果不需要直接使用JS函数，就不要这样做。当然，用JS编写所有东西都是另一回事。所以@DiH是正确的，这不是为什么不的问题？这是为什么的问题？我不同意。jQuery不是为了取代JS函数而设计的，它是一个库。如果您已经在使用jQuery fadeIn函数，那么使用vanilla JS document.GetElementsByCassName有什么意义？为什么这很重要？如果愿意，您可以轻松地在它的位置使用$'.dashdiv'。对我来说，它更具可读性，这很重要。这叫做一致性。当你们作为一个团队的一部分工作时，你们将学会不以“对我”的心态思考。您已经在使用一个库来介于您和JS函数之间。如果不需要直接使用JS函数，就不要这样做。当然，用JS编写所有东西都是另一回事。所以@DiH是正确的，这不是为什么不的问题？这是为什么的问题？我不同意。jQuery不是用来取代JS函数的，它是一个库。

// hide all
$('.dashdiv').hide();

// fade in each div one by one
divs = document.getElementsByClassName('dashdiv');
(function fade(i){
    if(i < divs.length){
        $(divs[i]).delay(1000).fadeIn(1850, function(){
            fade(++i);
        });
    }
})(0);

// hide all
$('.dashdiv').hide();

// fade in each div one by one
(function fade(i){
    if(i < $('.dashdiv').length){
        $($('.dashdiv')[i]).delay(1000).fadeIn(1850, function(){
            fade(++i);
        });
    }
})(0);

$('div.dashdiv').each(function(i) {
  $(this).fadeOut(0).delay(1000*i).fadeIn(1850);
});