Add/Remove a class to a div on every click using jquery

Question

I need to add a class to a 'div' on click, for CSS3 animations. But I also require to have that class removed after the animation is over.

I tried something like this but it does not work -

$('.class').click(function() {
    $('.class').removeClass("animate");
    $(this).addClass("animate");
});

Please help, thanks.

possible duplicate of [Callback when CSS3 transition finishes](http://stackoverflow.com/questions/9255279/callback-when-css3-transition-finishes) — billyonecan, Oct 21 '13 at 10:44
possible duplicate http://stackoverflow.com/questions/13884563/jquery-remove-class-after-css-animation-played — Mr. Black, Oct 21 '13 at 10:49
**Duplicate:** http://stackoverflow.com/questions/11784831/css3-add-class-to-fire-an-animation-and-remove-class-on-completion — Mr. Black, Oct 21 '13 at 10:53
Please use Google search first http://goo.gl/y16AW0 .. and try to avoid duplication — Mr. Black, Oct 21 '13 at 10:59
I searched a lot before posting the question, may be I was not able to find the right keywords. — Addicted, Oct 21 '13 at 11:02

score 3 · Accepted Answer · edited May 23 '17 at 12:28

You have two immediate possibilites:

1) Use a setTimeout function that fires after the animation is complete. To achieve this you should know how long the animation duration is:

$('.class').click(function() {
    var animDuration = 1000; //ms of the animation duration
    $(this).addClass("animate");
    setTimeout(function(){
       $(this).removeClass("animate");
    }, animDuration);
});

2) A better solution is to add an eventListener on animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd that fires whenever the animation is actually complete. For this approach you do not need to know the duration of the animation.

EDIT: from adeneo and also some code taken from here:

$('.class').click(function() {
    var animDuration = 1000; //ms of the animation duration
    $(this).addClass("animate");
    $(this).bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function () {
       $(this).removeClass('animate');
    });
});

The above code does almost what you say, "gets the duration dynamically". What it really does is listening for an event that fires when the animation is complete / finished. The reason for the multiple event listeners is because of browser compatibility, each browser fires its own event. (oAnimationEnd = Opera, MSAnimationEnd = IE etc)

Thanks: https://coderwall.com/p/hn7gsg

That was quick thanks! I will test it out. Between is there any way to get the animation duration dynamically? I guess I will have to use html5 'data-' attributes, right? But will it work with multiple buttons? Can you provide the code? — Addicted, Oct 21 '13 at 10:49

score 0 · Answer 2 · answered Oct 21 '13 at 10:50

0

You can use animate function for animation

   $('.class').click(function() { 
        $(this).addClass("animate");
        $('.class').animate($('.class').removeClass("animate"),2000);   
    });

answered Oct 21 '13 at 10:50

S. S. Rawat

5,943
4
43
59

Add/Remove a class to a div on every click using jquery

2 Answers2