how to add classes delaying with time

Question

Suppose I've the following html:

<ul>
  <li class="activeitem"><a href="#">one</a></li>
  <li><a href="#">two</a></li>
  <li><a href="#">three</a></li>
  <li><a href="#">four</a></li>
  <li><a href="#">five</a></li>
</ul>

$('ul a').on('click',function(e){
  e.preventDefault();
.....

Now, I want that if I click to five then it's parent's previous lists should be added with class activeitem but in first there is already so from next of this add class to next li and remove the class after 400ms and then add class to next li and again remove class after 400ms and add class to next li. This process happens until the clicked menu li i.e. five and now finally I should get activeitem class to the cilcked link's parent li.

possible duplicate of [jQuery: Can I call delay() between addClass() and such?](http://stackoverflow.com/questions/2510115/jquery-can-i-call-delay-between-addclass-and-such) — urbz, Aug 25 '14 at 10:46

Y.Puzyrenko · Answer 1 · 2014-08-25T11:15:42.767

0

Use setTimeout and recursion

function doSetTimeout(){
    setTimeout(function(){
       $ul.children('li').removeClass('activeitem');
       $ul.children('li:nth-child(' + i + ')').addClass('activeitem');

        if (i <= index){
            doSetTimeout();
        }
        i++;

    },400);
}

Here is Fiddle

edited Aug 25 '14 at 11:15

answered Aug 25 '14 at 10:35

Y.Puzyrenko

2,166
1
15
23

how to add classes delaying with time

1 Answers1