Jquery addClass and removeClass using setInterval

Question

I want to change the class name every 3 seconds. Boo, that won't work. How can i do this?

$(document).ready(function() { function moveClass(){ var x = $('.liveEvents'); x.removeClass('liveEvents'); x.addClass('liveEventsActive'); x.removeClass('liveEventsActive'); x.addClass('liveEvents'); } setInterval(moveClass, 3000); return false; }); 

Answer 1

You can do this in one line. Use toggleClass :

 setInterval(function(){$('.liveEvents').toggleClass('liveEventsActive')}, 3000); 

If you execute CSS correctly, you do not need to remove the liveEvents class. Just make the liveEventsActive class rewrite what you need.

Answer 2

Each time a function runs, you do four things that essentially return you to its original state:

• Delete class liveEvents
• Add liveEventsActive class
• Delete class liveEventsActive
• Add liveEvents class

You want to enable or disable these two classes, so take a look at the .toggleClass() function. You will also need two selectors, one to select elements with the liveEvents class and one to select elements with the liveEventsActive class.

Answer 3

With your code, the entire function runs every 3 seconds. The add / remove class occurs in one block, and you cannot see the difference.

jQuery has a method . toggleClass () , which will add / remove the specified class accordingly:

 function moveClass() { $('.liveEvents') .toggleClass('liveEventsActive'); } 

Demo

Answer 4

 $(document).ready(function() { function moveClass(){ $( ".liveEvents" ).switchClass( "liveEvents", "liveEventsActive", 1000); $( ".liveEventsActive" ).switchClass( "liveEventsActive", "liveEvents", 1000 ); } setInterval(moveClass, 3000); return false; }); 

this will replace your classes with transitions, hope this helps