单击按钮即可获得CSS动画

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?

Answer 1

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);
}

Answer 2

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');
    }
}

Answer 3

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');
});

Answer 4

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);
});