0

我总共有 4 个 div 块，div 块可以是 4 个，有时根据权限可能是 3 个或 2 个，或者只有 1 个 div 块。我有 4 个 div 块，每个 div 块都以 100 延迟淡入。

我怎样才能让它们总是对每个 div 块有 100 秒的延迟，例如，如果 div span4 仅靠它自己，它应该是 100 秒而不是 400 秒。因为 400 秒本身就太长了。

我怎样才能做到这一点？我的 JS 代码

$('div.span1').fadeIn(100);
$('div.span2').fadeIn(200);
$('div.span3').fadeIn(300);
$('div.span4').fadeIn(400);

<div class="span1"></div>
<div class="span2"></div>
<div class="span3"></div>
<div class="span4"></div>
4

2 回答 2

4

假设所有这些 div 元素都具有相似的类属性，您将能够计算each()函数中每个元素所需的延迟。一些与此类似的代码可能会有所帮助 -

var delta = 100;
$('div[class^="span"]').each(function(index,elem){
  $(this).fadeIn((index+1)*delta);
});

请注意，我正在增加索引，因为它是从零开始的。

我使用的选择器 ( $('div[class^="span"]')) 将匹配class 属性以 . 开头 span的所有元素。我假设您必须将其自定义为您的“现实生活”代码。

于 2013-02-19T21:48:17.367 回答
3

给所有 div 相同的类，然后执行：

$('div.span').hide().each(function (i) {
   $(this).fadeIn((i+1)*100);
})

jsFiddle 示例

于 2013-02-19T21:48:04.787 回答