Question

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?

Answer 1

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