Question

我试图一个接一个地淡入一组div。我以为我可以使用jquery提供的简单For Each功能。我的代码如下：

$('#menu_activate').click(function(){
  $('div.section').each(function(i){
    $(this).fadeToggle();     
  });
});

关于这一点的好处是它会迭代div并且当我点击激活按钮时它们都会淡入。问题是元素之间没有延迟淡出。

有什么想法吗？我试过超时功能无济于事......

此外，fadeToggle是一个自定义的jquery函数，可以正常运行。

提前致谢。汤姆。

Answer 1

您可能想要setTimeout，并且希望超时随每个div递增。这里的问题是fadeToggle都是一个接一个地被调用，没有延迟。因此，你必须自己引入延迟。有几种方法可以做到这一点，这是一个：

var myTimeout = 0;
var myIncrement = 300; // Wait 300ms between each div
$('#menu_activate').click(function(){
  $('div.section').each(function(i){
    setTimeout(function() { $(this).fadeToggle() },myTimeout);
    myTimeout += myIncrement;     
  });
});

基本上将fadeToggle设置为在超时后发生，该超时随每个div递增。

Answer 2

$('#menu_activate').click(function(){
    $('div.section').each(function(i){
        $(this).queue(function() {
            $(this).fadeToggle();
            $(this).dequeue();
        });
    });
});

Answer 3

最后答案！

  var myTimeout = 0;
  var myIncrement = 300; // Wait 300ms between each div
  $('#menu_activate').click(function(){
    $('div.section').each(function(i){
      setTimeout(function() { $('#section_'+i).show(); },myTimeout);
      myTimeout += myIncrement;     
    });
  });

这是我在做的时候没有想到的增量...而且在Adam的回答中，它并没有将DIV与“this”联系起来，所以我不得不给他们个人ID并重复代替。如此亲近的亚当。非常令人印象深刻，并且非常感谢您的帮助！

jquery衰落序列

3 个答案: