If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Activating Animation with Javascript

I'm working with designing buttons to a quiz, and I have two questions for you today.

The first one is, if I have an animation in CSS already, for example the one below, how do I activate the animation on an ID with Javascript?

The second one is, how do I make sure that the animation is finished before anything else happens? Because I will be changing the buttons' classes right after the buttons are pressed. I want the buttons' animations to finish, and then change the classes. So is there some sort of timer for that?

Do you have an example of the code that "is the animation" such as JavaScript and / or (both) HTML and any scripting that goes with the HTML...

STOP using $ prefix on JavaScript variable names...
Please remember to wrap any code you have in forum tags:- [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]If you can't think outside the box, you will be trapped forever with no escape...

So there are a couple of things to look at here. I'll go in order of course, starting with starting the animation with javascript. This can be done simply by setting the 'animation' and '-webkit-animation' properties of an element. Of course remember in javascript you don't use the hyphens, so you'll end up with something like this

And so essentially you have your button run the _StartAnimation() function, using 'this' as the parameter. This will pass the button element to the function, which will set the event listeners for the end of the animation, and then run the animation on that element. Once complete, you'd simply add '$a.className = "CLASS_NAME_HERE";' to the _AnimationEnd() function.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thanks for answering! The user is meant to navigate through the buttons with the arrows on the keyboard, and press them using "Enter". For that I have done an event listener as well, like the one below.