CSS animation on click of a button

Question

Here is the plunker

$(document).ready(function(){
  $('#btn-animate').click(function(){
    animate();
  });
  $('#btn-remove').click(function(){
    $('.to-animate').removeClass('animate');
  });

  function animate(){
    $('.to-animate').removeClass('animate');
    $('.to-animate').addClass('animate');
  }
});

Here if I click on "ANIMATE" button it adds an 'animate' class to the div and animates it(changes color). But if you click again it tries to remove the class 'animate' and add it back so that the animation triggers again.

But it is not happening. Strangely if I click the "REMOVE" button to remove the 'animate' class and then with the "ANIMATE" button add the class it animates again.

Can anyone explain why first button is failing to give the required result? And how can I get the animation be triggered every time I click the "ANIMATE" button?

David Ewen · Accepted Answer · 2017-01-25 06:24:34Z

2

Typically browsers don't repaint the UI until after all javascript has finished running and most browsers are smart enough to figure out that after the second click of the animate button the DOM is the same before and after and so it doesn't do anything.

Easiest solution is to remove the class then set a timeout to add it back after a short delay.

function animate(){
    $('.to-animate').removeClass('animate');
    setTimeout(function(){$('.to-animate').addClass('animate');}, 10);
}

answered Jan 25, 2017 at 6:24

David Ewen

3,7321 gold badge22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DevWL Over a year ago

This aproach solve the problem. Should be accepted as correct answer.

Philippe Gonzaga · Accepted Answer · 2017-01-25 05:11:02Z

0

Man, from what I see, everything is working normal, I opened the link and there it is also working normal.

What if you check if the class exists instead of remove?

function animate(){
    if(!$('.to-animate').hasClass('animate')){
        $('.to-animate').addClass('animate');
    }
}

answered Jan 25, 2017 at 5:11

Philippe Gonzaga

3431 silver badge9 bronze badges

Comments

Jack · Accepted Answer · 2017-01-25 06:11:50Z

0

Instead of getting the animation from a class, just do the animation with jquery

$(document).ready(function(){
  $('#btn-animate').click(function(){
    $(this).animate(
    "opacity":"0",
    // whatever animation you want in here
    }, 300);
});

answered Jan 25, 2017 at 6:11

Jack

12 bronze badges

Comments

marc_s · Accepted Answer · 2017-01-26 08:26:33Z

0

jQuery already has the class for your need. It is called toggleClass

$(document).ready(function() {
  $('#btn-animate,#btn-remove').click(function() {
    $('.to-animate').toggleClass('animate');
});

edited Jan 26, 2017 at 8:26

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jan 25, 2017 at 5:15

Jack jdeoel

4,5886 gold badges28 silver badges57 bronze badges

1 Comment

DevWL Over a year ago

I don't think toggleClass will be apropriate here. What if he want immediate restart of the animation when clicking on #btn-animate ? Also #btn-remove will now start animation.

Collectives™ on Stack Overflow

CSS animation on click of a button

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related