jquery cycle - add then remove css class - infinite loop

Question

How do I use jQuery to infinitely add then remove a CSS class on a set of 4 li's.

Basically, see this simple fiddle (without any jquery): http://jsfiddle.net/kHsvN/

I want to cycle through the boxes to change the css of a box, flip back to original css, then go on to the next one etc etc...

Any help appreciated!

As far as I understand this, at any given time there should be one box having the class? — bardiir, Oct 03 '12 at 08:54

score 2 · Answer 1 · edited May 23 '17 at 12:18

$(document).ready(function() {
   window.setInterval(function() {
        $("#topboxesmenu li a").each(function() {
            $(this).css("background", get_random_color());
    });
  }, 1000);
});

function get_random_color() {
   var letters = '0123456789ABCDEF'.split('');
   var color = '#';
   for (var i = 0; i < 6; i++ ) {
     color += letters[Math.round(Math.random() * 15)];
   }
   return color;
}

This example uses a random colour, but could easily be changed to .addClass() in the .each part.

JS Fiddle (Live Example)

http://jsfiddle.net/kHsvN/6/

Random color generator in JavaScript

Impressive but perhaps overly-complex for the OP's requirement :) — El Ronnoco, Oct 03 '12 at 09:08

The Alpha · Answer 2 · 2012-10-03T15:58:16.930

You may try this

CSS For current item, class to be added/removed

ul#topboxesmenu li a.current{ background:black }

JS

$('#topboxesmenu li a').each(function(i){
    var t=$(this);
    setTimeout(function(){
        t.addClass('current');
        setTimeout(function(){
            t.removeClass('current');
        }, 1000);
    }, 1100*i);
});

DEMO

Update: For continuous loop

$(function(){
    loopIt();
});

function loopIt(){    
    $('#topboxesmenu li a').each(function(i){
        var t=$(this);
        setTimeout(function(){
            t.addClass('current');
                setTimeout(function(){
                    t.removeClass('current');
                    if(i==$('#topboxesmenu li a').length-1) loopIt();;
                }, 1000);
        }, 1100*i);
    });
}

DEMO.

bardiir · Answer 3 · 2012-10-03T10:07:18.907

1

Try this:

jQuery(document).ready(function() {
    window.setInterval(function() {
            var oldBox = jQuery('#topboxesmenu li.active');
            if(oldBox.length == 0 || oldBox.next().length == 0)
            {
                    oldBox.removeClass('active');
                jQuery('#topboxesmenu li:first-child').addClass('active');
            }
            else
                oldBox.removeClass('active').next().addClass('active');
    },2000);
});

It will cycle through the boxes, adding an active class to them one after the other.

http://jsfiddle.net/gKEmL/

edited Oct 03 '12 at 10:07

answered Oct 03 '12 at 09:01

bardiir

14,556
9
41
66

No still no joy :( Don't understand as it works fine in jfiddle http://www.deeside.ac.uk/build/test.php – Ben Davis Oct 03 '12 at 09:54
There seems to be some invisible character at the end of the script that is illegal, probably a non breaking space from copy&paste. Try to copy&paste the code from jsfiddle instead from here maybe. – bardiir Oct 03 '12 at 09:56
Or as an alternative delete anything between the }); and as well as and jQuery(doc – bardiir Oct 03 '12 at 09:58
Thanks, tidied the code up and still not working unfortunately :( http://www.deeside.ac.uk/build/test.php – Ben Davis Oct 03 '12 at 09:59
I just don't know where the characters come in... try to copy&paste from here: http://pastebin.com/ChXmg0Fc – bardiir Oct 03 '12 at 10:08
Bardiir - a little more help if you will. I've update the test page, what I am after is the boxes to show their hover state background, one after the other, in an infinite loop, is this possible? http://www.deeside.ac.uk/build/test.php thanks – Ben Davis Oct 03 '12 at 10:24
Just replace the CSS selectors: `ul#topboxesmenu li a.schoolleavers:hover` -> `ul#topboxesmenu li a.schoolleavers:hover, ul#topboxesmenu li.active a.schoolleavers` and likewise for all the other hovers... this way the hover state will react to hover and to the active class. – bardiir Oct 03 '12 at 14:37
You have saved me sooo much headache and time! Works magnificently. Thank you – Ben Davis Oct 03 '12 at 14:56

Nelson · Answer 4 · 2012-10-03T10:11:02.947

0

I think this is doing what you want:

el = $('#topboxesmenu li:first-child');
setInterval(function() {
    el = window.el;
    el.siblings().children('a').css('background','#ff0000');
    el.children('a').css('background-color', 'blue');
    el = el.next().length ? el.next() : el.parent().children('li:first-child');
}, 1000);

See working demo

UPDATE:
Regarding your test page don't working, you have your javascript outside the body tag, try putting your </body> tag just before the </html> tag. You currently have this:

</body>

<script type="text/javascript" ....
...
...
</html>

UPDATE 2:
Also your jquery script tag :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>

should be placed inside the <head> of your page, not the body where you currently have it.

edited Oct 03 '12 at 10:11

answered Oct 03 '12 at 09:12

Nelson

49,283
8
68
81

Thanks Nelson, trying your solution on a different test page and it's not working either :S http://www.deeside.ac.uk/build/test2.php – Ben Davis Oct 03 '12 at 10:08
I spotted another wrong thing, your jquery library should be place inside , see my updated answer. – Nelson Oct 03 '12 at 10:12

jquery cycle - add then remove css class - infinite loop

4 Answers4