ADD class(s) every x amount of seconds. Each new one replace the old

[Chasew]

Disclaimer: Very new to JS… Mostly learning jQuery

Problem 1. I’d like the class of an element to cycle through a list of classes, but each successive class should replace the previous.

Problem 2. The element has other classes adding additional styling that cannot be removed. So I can’t just change the class of the element. I want to add ‘frame1’, then replace ‘frame1’ with ‘frame2’, then replace ‘frame2’ with ‘frame3’ etc. meanwhile leaving the other pre-existing classes intact. I think this is the main road block I’m hitting so far.

Maybe bonus points for jQuery? I’m using a bit of JS found on the interwebs that set the class, which worked, but kills the other classes. I tried += to add class? but that didn’t work. So I threw some jQuery in there but it doesn’t like that either.

Thanks!

http://codepen.io/chasebank/pen/gbOrNo

[Ilan Firsov]

For this you should keep track on your currently applied class name, and then on each interval ‘tick’ you use jQuery .removeClass and .addClass.
With pure JS you can use .replace on the class attribute to remove the currently applied classname (classAttr.replace(currentClass, '');) then append the new class name

[Chasew]

Hey, thanks for the response.

So, I’m sure I’ve butchered the syntax… But I seem to have it switching classes, but won’t loop.

Am I doing something particularly wrong?

[Author]

Posts