Samul Samul - 2 months ago 19
CSS Question

Why removing class with jquery is not being done fast?

I use animate.css in most of my websites cause it's freaking awesome but frequently I got stuck with a problem.

Please see this link -> http://quemfazsite.com.br/temp/teste8.php

Code below if you want to inspect:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" type="text/css" />


</head>

<body>

<div onclick="$('#xxx').removeClass('flipInX').addClass('flipInX');" style="cursor:pointer;">CLICK TO ANIMATE IMMEDIATLY!</div>

<div onclick="$('#xxx').removeClass('flipInX'); window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);" style="cursor:pointer;">CLICK TO ANIMATE WITH TIMEOUT!</div>

<div id="xxx" style="background:#FF0000; width:500px; height:500px;" class="animated flipInX"></div>

</body>
</html>


I have an element already with the class "flipInX" when page loads. Ok, if you click the first button (top of the page) I simply remove this class and add it again. BUT NO ANIMATION HAPPENS! I use this:

$('#xxx').removeClass('flipInX').addClass('flipInX');


BUT if I use the second button (code below) the animation happens:

$('#xxx').removeClass('flipInX');
window.setTimeout(function(){$('#xxx').addClass('flipInX')},100);


Is there some bug with jquery? I mean, it looks like the chaining is not working properfly, if the class had been removed with "removeClass" the effect should have worked when the class gets added back! What is going on and how can I solve it?

EDIT:

The code below does not work too, so dont need to waste your time using delay cause unfortunatelly it wont work :(

$('#xxx').removeClass('flipInX').delay(1000).addClass('flipInX');

Answer Source

The animation has a delay to execute, in milliseconds.

When you remove the class and re-add it immediately, the animation does not have time to execute. jQuery doesn't "wait" for the animation to execute between "remove" and "add".

The setTimeout() is needed to to let you see the animation of the class removal before re-adding the class... That is how you tell jQuery to wait in between.

And .delay() works on jQuery animation queue... So between two animate(), it will work. It doesn't work between addClass() and removeClass() that call a CSS animation.


EDIT

You have no choice to use setTimeout() if you want to use CSS animations from the CDN.
Else, you could make your own CSS animation using @keyframe...
But if your concern is about the markup simplification, you can have it in the click handler. So all you need is the class animated.

$(".animated").on("click",function(){
  $(this).removeClass("flipInX");
  var that=$(this);
  setTimeout(function(){
    that.addClass("flipInX");
  },100);
});

CodePen