jQuery loop - setTimeout, addClass, removeClass

Question

I will be an easy one for JavaScripters. I had a long research but I couldn't find the right answer. I want a menu (basically just anchors and not list elements) to be highlighted like a slider with specific time delay.

Also, it would be nice if you know how to get rid all of these useless ids around using $("#menu a") and $(this). Since I cannot do much JavaScript (although I prefer the simplicity), here is my crappy code in jQuery that works, but it's not looping.

$("#anchor1").addClass("highlight");

function loopMenu() {
    window.clearTimeout();
    setTimeout(function(){$("#anchor1").removeClass("highlight");}, 4000);
    setTimeout(function(){$("#anchor2").addClass("highlight");}, 4000);
    setTimeout(function(){$("#anchor2").removeClass("highlight");}, 8000);
    setTimeout(function(){$("#anchor3").addClass("highlight");}, 8000);
    setTimeout(function(){$("#anchor3").removeClass("highlight");}, 12000);
    setTimeout(function(){$("#anchor4").addClass("highlight");}, 12000);
    setTimeout(function(){$("#anchor4").removeClass("highlight");}, 16000);
    setTimeout(function(){$("#anchor1").addClass("highlight");}, 12000);
}

loopMenu();

What I want: a script that removes Class from current element and addClass to the next anchor type element every 4 seconds and then jump to the first element and repeat it forever.

Here is a solved question that has a few relations to this, although I can't make it work either.

You need to execute loopMenu again after all of your other iterations have happened, 4 seconds later. — Kevin B, May 14 '13 at 15:00

score 6 · Accepted Answer · answered May 14 '13 at 15:08

something like:

$(function () {
  var $anchors = $('.anchor');

  (function _loop(idx) {
    $anchors.removeClass('highlight').eq(idx).addClass('highlight');
    setTimeout(function () {
      _loop((idx + 1) % $anchors.length);
    }, 4000);
  }(0));
});

with:

<a class="anchor">A</a>
<a class="anchor">B</a>
<a class="anchor">C</a>
<a class="anchor">D</a>
<a class="anchor">E</a>
<a class="anchor">F</a>
<a class="anchor">G</a>

http://jsbin.com/oselux/1/

score 3 · Answer 2 · answered May 14 '13 at 15:04

3

I would just go this way:

JS

var $anchors = $('a.anchor'), counter = 0;

setInterval(function(){

  $anchors.removeClass('highlight');
  $anchors.eq(counter++ % $anchors.length).addClass('highlight');

}, 4000);

Markup

<ul>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
  <li><a href="#" class="anchor">I am an anchor</a></li>
</ul>

Fiddle.

answered May 14 '13 at 15:04

moonwave99

21,957
3
43
64

This is very useful, but it waits 4 secs before it starts to highlight. Its a very good solution though, thanks! – danielnagy May 14 '13 at 15:16
@danielnagy highlight the first by default then, and start counting from 1. – moonwave99 May 14 '13 at 15:19
thanks, its works in this way. Later if I can I certainly vote you up. Cheers! – danielnagy May 14 '13 at 15:22

score 1 · Answer 3 · answered May 14 '13 at 15:01

simply execute loopMenu after 20 seconds to continue.

$("#anchor1").addClass("highlight");
function loopMenu(){
    //window.clearTimeout(); what was this for?
    setTimeout(function(){$("#anchor1").removeClass("highlight");}, 4000);
    setTimeout(function(){$("#anchor2").addClass("highlight");}, 4000);
    setTimeout(function(){$("#anchor2").removeClass("highlight");}, 8000);
    setTimeout(function(){$("#anchor3").addClass("highlight");}, 8000);
    setTimeout(function(){$("#anchor3").removeClass("highlight");}, 12000);
    setTimeout(function(){$("#anchor4").addClass("highlight");}, 12000);
    setTimeout(function(){$("#anchor4").removeClass("highlight");}, 16000);
    setTimeout(function(){$("#anchor1").addClass("highlight");}, 16000); // this was 12000, changed to 16000 probably a copy paste error
    setTimeout(loopMenu, 20000);
}
loopMenu();

Works as expected, although I must keep the ids and the long script. Thanks anyway its very useful and will certainly use this some smaller jQuery project. Thanks! — danielnagy, May 14 '13 at 15:16

score 0 · Answer 4 · answered May 14 '13 at 15:09

Use delay with jQuery objects instead of setTimeout, it is a clearer code.

$("#anchor1").addClass("highlight");
function loopMenu(){
    $("#anchor1").delay(4000).removeClass("highlight");
    $("#anchor2").delay(4000).addClass("highlight");
    $("#anchor2").delay(8000).removeClass("highlight"));
    $("#anchor3").delay(8000).addClass("highlight"));
    $("#anchor3").delay(12000).removeClass("highlight");
    $("#anchor4").delay(12000).addClass("highlight");
    $("#anchor4").delay(16000).removeClass("highlight");
    $("#anchor1").delay(16000).addClass("highlight");
    setTimeout(loopMenu, 20000);
}
loopMenu();

.delay doesn't work on addclass or removeclass without a duration. — Kevin B, May 14 '13 at 15:21

score 0 · Answer 5 · answered May 14 '13 at 15:32

In your anchor tags set the attribute class equal to something like "menuItem". Then in your jQuery do...

function startHighLighting(item, startTime, endTime) {    

    setInterval(function() {  
        item.addClass('highlight');  
        setInterval(function() {  
            item.removeClass('highlight');  
        }, endTime);  
    }, startTime);  
}

$("a.menuItem").each(function(index) {  
    var item = $(this),  
    baseTime = 4000,  
    highlightTime = baseTime * index,  
    unhighlightTime = baseTime * (index + 1);  

    startHighLighting(item, highlightTime, unhighlightTime);  
});

I appologize about the spacing. I'm still trying to figure out the code entry portion of this.

jQuery loop - setTimeout, addClass, removeClass

5 Answers5