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;
});
You're doing four things every time the function runs, which essentially takes you back to your start state:
liveEvents
liveEventsActive
liveEventsActive
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 theliveEvents
class and one to select elements with theliveEventsActive
class.You can do this in one line. Use toggleClass:
If you do your CSS correctly, you don't need to remove the
liveEvents
class. Just make theliveEventsActive
class overwrite what you need.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:
DEMO
this will swap your classes using transitions, hope this will help