jquery addClass and removeClass with setInterval

Question

I want to change class name every 3 seconds. Bu it doesn'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 do your CSS correctly, you don't need to remove the liveEvents class. Just make the liveEventsActive class overwrite what you need.

Answer 2

You're doing four things every time the function runs, which essentially takes you back to your start state:

• Remove class liveEvents
• Add class liveEventsActive
• Remove class liveEventsActive
• Add class liveEvents

You want to toggle those two classes on/off, so take a look at the .toggleClass() function. You'll 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 whole function is executed every 3 seconds. The add/remove class happens in one block and you obvisouly cannot see the difference.

jQuery has a .toggleClass() method that 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 swap your classes using transitions, hope this will help