jQuery CSS animations with addClass and removeClass

Question

So, I have now made jQuery Ajax code that checks that the username and password are correct. But instead of just displaying a error message, I'd like to shake the element as well.

Define Shake?

That kind of shake that wordpress has. Go to wordpress.com/wp-login.php and fill there some random info and the element shakes.

That shake can be done by Animate.css.

What's the problem then?

When the login fails, jQuery makes this.

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

But because the shake element has CSS Animations that run only once, we won't be needing the CSS shake class after it shaked the element.

So I tried:

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

But that happens all too quickly.

So I tried again:

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

Still not play the animation and then remove the class .shake from the .element. If the user enters wrong details more then once then shake won't work.

You can play with the fiddle here.

Goal is to be able to shake the element more then once by clicking the Shake button.

Answer 1

You could use the following to remove the class when the animation completes.

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 small time out and then add the shake class. That will make it shake every time:

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

});

Answer 3

addClass() and removeClass() don't respect delay(), so they'll ignore the delay and just do what they were told to like the delay() doesn't exist

fadeIn() does though.

So if you do this, it should work correctly. This calls the anonymous function to remove class shake after delay and fadeIn have finished.

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