JQuery CSS animations with addClass and removeClass

Question

So now I have made jQuery Ajax code that checks the username and password are correct. But instead of just displaying an error message, I would also like to shake the item.

Identify the shake?

Such a concussion that Wordpress has. Go to wordpress.com/wp-login.php and fill in some random information there and the element will shake.

Shake can be performed by Animate.css .

What is the problem?

If login fails, jQuery does this.

$('.element').addClass('shake');

But since the shake element has a CSS animation that runs only once, we don’t need the CSS shake class after it has shaken the element.

So I tried:

$('.element').addClass('shake').removeClass('shake');

But this is happening too fast.

So I tried again:

$('.element').addClass('shake').delay(1000).removeClass('shake');

Do not play the animation, and then remove the .shake class from .element . If the user enters incorrect data more than once, then shaking will not work.

You can play the violin here .

The goal is to shake the item more than once by pressing the Shake button.

Answer 1

You can use the following to remove a class when the animation is complete.

Updated example

 $(function () { $('button').click(function () { el = $('.element'); el.addClass('shake'); el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) { el.removeClass('shake'); }); }); }); 

Answer 2

Just remove the shake class, add a little timeout, and then add the shake class. This will make him tremble every time:

 $(function(){ $('button').click(function() { $('.element').removeClass('shake'); setTimeout(function(){ $('.element').addClass('shake'); }, 50); }); 

});

Answer 3

addClass() and removeClass() do not respect delay() , so they will ignore the delay and just do what they were told so that delay() does not exist

fadeIn() does.

So, if you do this, it should work correctly. This calls an anonymous function to remove the class jitter after the delay and the completion of fadeIn.

 $('.element').addClass('shake').delay(1000).fadeIn(0, function() { $(this).removeClass('shake'); });