JQuery 使用each()作为每个循环的经典，而不是一次全部循环

Question

我正在尝试循环一组 div 标签并一次将它们淡入和淡出。 到目前为止，使用 .each() 运算符可以一次性完成所有这些操作。 如何使用 .each() 作为更经典的每个循环？

这是我的 JQuery 代码片段，目前它使所有 div 标签一起淡入淡出，而不是一一淡出。

$("document").ready(function() {   
// all div tags are hidden at start 

    $(".myclass").each(function (i) {
      var $div = $(this);
      showDiv($div);
      hideDiv($div);
});

function showDiv(theDiv)
{
      $(theDiv).fadeIn(4000);
}

function hideDiv(theDiv)
{
       $(theDiv).fadeOut(4000);
}     
});

感谢您考虑这个问题，

Answer 1

这不是使用 .each() 与普通 for 循环的问题。问题是动画是通过超时处理的(由 jQuery 管理)。对 .fadeIn() 和 .fadeOut() 的调用会在动画发生之前立即返回。

您可以为每个 fadeIn() 添加一些延迟，或者您可以以不同的方式构建代码:

$("document").ready(function() {   
  var divs = $('.myclass'), i = 0;
  function reveal() {
    if (i === divs.length) return;
    divs.eq(i).fadeIn(4000, function() {
      divs.eq(i).fadeOut(4000, function() {
        i++;
        setTimeout(reveal, 0);
      });
    });
  }
  setTimeout(reveal, 0);
});