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);
});

Answer 2

使用延迟：

var delay = 0;
$(".myclass").each(function (i) {
    var $div = $(this);
    showDiv($div);
    hideDiv($div, delay);
    delay += 100;
});


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

Answer 3

您的.each功能按预期工作。不能正常工作的是Javascript本质上是异步的。在再次致电showDiv之前，它不会等待hideDiv完成。然后呼叫开始相互冲突。

你想要使用的是一个间隔，它实际上不是jQuery本身的一部分，而是构建到Javascript中。

这样的事情：

function showHide(theDiv) {
     if( $(theDiv).is(":visible") ) {
          $(theDiv).fadeOut(4000);
     }
     else {
          $(theDiv).fadeIn(4000);
     }
}

setInterval( function() { showHide("#theDivsID") }, 4100 );

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

3 个答案: