jQuery - 延迟 DOM 中的每个 div [重复]答案

【问题标题】：jQuery - delay each div in DOM [duplicate]jQuery - 延迟 DOM 中的每个 div [重复]
【发布时间】：2013-02-17 08:41:51
【问题描述】：

我正在尝试循环遍历 DOM 中的每个 DIV 并应用效果（比如说fadeOut()），每个 DIV 之间有时间间隔。由于某种原因，这件事不想工作。

var stupid = -1000;

return_stupid = function(){
return stupid+=1000;
}

$(function(){
    $("div").not("#wrapper").delay(return_stupid()).queue(function(){
        $(this).fadeOut("slow");
        $(this).dequeue();
    });
});

编辑：嗯，我发现了这个问题。 return_stupid() 只调用一次，因为它不是 .each() 语句。

好吧，我不想使用 each()，它会占用内存！

有什么办法吗？

【问题讨论】：

标签： jquery delay fadeout

【解决方案1】：

您可以使用如下的 jQuery 插件。它会在给定间隔之间淡出每个匹配的元素。

$.fn.fadetraining = function(duration, delay) {
  var $elements = this;
  $elements.length && $elements.first().fadeOut(duration, function(){
    $elements.slice(1).delay(delay).fadetraining(duration);
  });
  return $elements;
};

你可以这样使用它：

$("div").not("#wrapper").fadetraining("slow", 1000);

You can see it here.

我不明白你为什么不想使用.each()。毕竟，几乎所有的 jQuery 函数都在内部使用它。

注意：这是我之前编写的一个 jQuery 插件的衍生产品，$.fn.fadetrain。

【讨论】：

我真的不知道我不想用它。似乎选择 $("div") 比运行每个 div 快得多
@GalWeissman，不管怎样，如果不单独访问 each div，恐怕你无法应用你想要的动画:)
实际上，我想同时触发所有元素的淡出，而不是等待另一个完成，而是以 100 毫秒的时间差全部执行
@GalWeissman，如果你坚持，那么你已经有了答案，你必须使用.each()

【解决方案2】：

我认为您可能使用错误的延迟。试试这样的：

$(".cell").animate({width:"100px",height:"100px"}, 3000).delay(1000).fadeOut();

我以 JSFiddle 为例。 http://jsfiddle.net/M9n8a/1/

【讨论】：