jQuery how to add a class to an element one by one with a small delay?

Question

jQuery how to add a class to an element one by one with a small delay when click on the #button ? not to add the class at once for all element.I want to do it one by one. Please help. Thanks in advance.

<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">

This may help you http://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery — techie_28, Sep 21 '12 at 07:17

xdazz · Answer 1 · 2012-09-21T07:58:52.240

15

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

edited Sep 21 '12 at 07:58

answered Sep 21 '12 at 07:26

xdazz

158,678
38
247
274

However, I'd suggest to drop useless variable: http://jsfiddle.net/vbwtW/1/. Otherwise, that's +1. – VisioN Sep 21 '12 at 07:34
@VisioN Yep, that's better :) – xdazz Sep 21 '12 at 07:43
Thanks xdazz. This is what Im looking for. – Kasun Malith Sep 21 '12 at 07:46
A small question. How to start it from bottom instead of top? – Kasun Malith Sep 21 '12 at 07:54

score 3 · Answer 2 · answered Sep 21 '12 at 07:20

You can use 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);
});

Demo: http://jsfiddle.net/bdUxa/

score 1 · Answer 3 · answered Sep 21 '12 at 07:19

1

do a settimeout with a delay and set the classname by the index and it should work.

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

let me know if it works.

answered Sep 21 '12 at 07:19

Chandra Sekhar Walajapet

2,534
17
24

It's Working. Thank you so much :) But my question was do it using jQuery. Anyway It doesn't matter. It works. – Kasun Malith Sep 21 '12 at 07:44

jQuery how to add a class to an element one by one with a small delay?

3 Answers3