jQuery - add class to next element and remove it from current after some time

jquery

Solution

Following code may help you: jsfiddle

     setInterval(function(){

           var active = $(".active").removeClass('active');
          if(active.next() && active.next().length){
                active .next().addClass('active');
    }
    else{
      active.siblings(":first").addClass('active');
    }

  }, 100);​

Problem

I need to do the "active" class will move from the first list item to next one after 3 sec ... stay there for 3 sec and then move to next one, after another 3 sec move to next ... and next, and next ... when it comes to last one (list_4) hten it should start again from first li I need ... if the list_3 has active class, class "block" with the same number should be visible, other "blocks" hidden or undisplayed (in this case block_3) ``` <ul> <li class="list_1 active"><a href="#">some text</a> <li class="list_2"><a href="#">some text</a> <li class="list_3"><a href="#">some text</a> <li class="list_4"><a href="#">some text</a> </ul> <div> <span class="block_1" style="display:block">some content</span> <span class="block_2" style="display:none">some content</span> <span class="block_3" style="display:none">some content</span> <span class="block_4" style="display:none">some content</span> </div> ``` I want also to pause the "jumping" on ul:hover, when mouse goes out "jumping" shluld continue Is tehre any not to complicated way to do that?

Original source