CODEWITHSUNDEEP
javascriptjqueryhtmlcss-animationsanimate.css
Miro Rauhala
Miro Rauhala

Reputation: 190

jQuery CSS animations with addClass and removeClass

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.

Upvotes: 8

Views: 10951

Answers (3)

Josh Crozier
Josh Crozier

Reputation: 240928

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

Upvotes: 16

fjc
fjc

Reputation: 5815

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

});

Upvotes: 2

CRABOLO
CRABOLO

Reputation: 8793

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

Upvotes: 1

Related Questions