Question

我总共有4个div块，div块可以是4，有时它可以是3或2或仅基于权限的1 div块。我有4个div块，每个div块以100延迟淡入。

如何让它们每个div块始终有100秒的延迟例如，如果div span4本身只有100秒而不是400.因为itseld 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>

Answer 1

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

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

请注意，我正在递增索引，因为it is zero based。

我正在使用的选择器（$('div[class^="span"]')）将匹配class attribute starts with span的所有元素。我假设您必须根据“现实生活”代码进行自定义。

Answer 2

将所有div分配给同一个类，然后执行：

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

<强> jsFiddle example

jquery将fadein添加到div块

2 个答案: