jquery衰落序列答案

【问题标题】：jquery fading sequencejquery衰落序列
【发布时间】：2009-09-22 15:05:21
【问题描述】：

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

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

这样做的好处是它确实会遍历 div，并且当我单击激活按钮时它们都会淡入。问题是元素之间没有延迟。

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

另外，fadeToggle 是一个自定义 jquery 函数，可以按您的预期工作。

提前致谢。汤姆。

【问题讨论】：

我认为你的意思是 setTimeout 的超时功能 - 什么没用？这是做你想做的事情的普遍接受的方式。
谢谢你...是的，我认为这是执行此操作的常用方法，但它需要的不仅仅是看起来的 setTimeout 函数。

标签： jquery html foreach

【解决方案1】：

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

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

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

【讨论】：

谢谢！十分优雅。我不得不稍微调整一下才能让它工作，但你让我朝着正确的方向前进。谢谢

【解决方案2】：

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

【讨论】：

【解决方案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;     
    });
  });

这是我做这件事时没有考虑的增量......根据亚当的回答，它不是用“this”来指代 DIV，所以我必须给他们单独的 ID 并对其进行迭代反而。如此接近亚当。非常令人印象深刻，感谢您的帮助！

【讨论】：