jQuery如何以很小的延迟将一个类一个一个地添加到一个元素中？

Posted 2023-05-08

【中文标题】jQuery如何以很小的延迟将一个类一个一个地添加到一个元素中？

【英文标题】：jQuery how to add a class to an element one by one with a small delay?

【发布时间】：2012-09-13 14:23:22

【问题描述】：

jQuery 如何在单击#button 时将一个类一个一个地添加到一个元素中，并且延迟很小？ 不要一次为所有元素添加类。我想一个一个地做。请帮忙。提前致谢。

<ul id="scroll-set">
<li class="  imVisible">Brentwood</li>
<li class="imVisible ">Antioch</li>
<li class=" imVisible">Pittsburg</li>
<li class=" imVisible">Concord</li>
<li class="imVisible ">Walnut Creek</li>
<li class=" imVisible">Danville</li>
<li class=" imVisible">San Ramon</li>

</ul>
<div id="button">

【问题讨论】：

这可能对你有帮助***.com/questions/7302824/…

【参考方案1】：

The working demo.

$('#button').click(function() 
  $('#scroll-set li').each(function(i) 
    var $li = $(this);
    setTimeout(function() 
      $li.addClass('imVisible');
    , i*100); // delay 100 ms
  );
);

---

The reverse version.

$('#button').click(function() 
  $($('#scroll-set li').get().reverse()).each(function(i) 
    var $li = $(this);
    setTimeout(function() 
      $li.addClass('imVisible');
    , i*100); // delay 100 ms
  );
);

​

【讨论】：

但是，我建议删除无用的变量：jsfiddle.net/vbwtW/1。否则，就是 +1。

@VisioN 是的，这样更好:)

谢谢 xdazz。这就是我要找的。​​span>

一个小问题。如何从底部而不是顶部开始？

【参考方案2】：

你可以使用setInterval:

$(function()
  var el = $('li');
  var index = 0;
  var timer = window.setInterval(function()
    if  (index < el.length) 
      el-eq(index++).addClass('imVisible');
     else 
      window.clearInterval(timer);
    
  , 500);
);

演示：http://jsfiddle.net/bdUxa/

【参考方案3】：

延迟设置超时并按索引设置类名，它应该可以工作。

var i=0;
function changeClass()

    if(i<document.getElementById("scroll-set").childNodes.length)
    
        document.getElementById("scroll-set").childNodes[i].className= "whateverclassname";
        i++;
        setTimeout(changeClass,1000);
    

让我知道它是否有效。

【讨论】：

它正在工作。非常感谢 :) 但我的问题是使用 jQuery 来做。反正没关系。它有效。