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.

Josh Crozier · Accepted Answer · 2014-05-03 19:57:08Z

16

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

answered May 3, 2014 at 19:57

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Miro Rauhala Over a year ago

That actually works! But I have no clue how it works since I don't really know much JS

Miro Rauhala Over a year ago

I guess I have to look more into .one()

Chun Over a year ago

Daaamn I've been looking for this solution all over the place!! Been trying some hacks adding and removing the animation attribute but no luck. Now with this worked like a charm!!! thumbs up! Thank you

Josh Crozier Over a year ago

@Cʜᴜɴ - Awesome, that's good to know! I'm glad these answers are helping so many people.

fjc · Accepted Answer · 2014-05-03 19:55:34Z

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

});

answered May 3, 2014 at 19:55

fjc

5,85521 silver badges38 bronze badges

2 Comments

Josh Crozier Over a year ago

This works, but it produces a weird flicker for some reason: jsfiddle.net/VYuec (Chrome)

fjc Over a year ago

I can't reproduce the flickering here, but I would suggest: Let it shake first, have the time out afterwards and remove the class after the time out. That should avoid flickering.

CRABOLO · Accepted Answer · 2014-05-03 19:51:52Z

1

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

answered May 3, 2014 at 19:51

CRABOLO

8,82439 gold badges47 silver badges68 bronze badges

3 Comments

Miro Rauhala Over a year ago

There is no need for the element to fadeOut

Sam Thornton Over a year ago

It looks like @Stilly.stack used .fadeOut in order for .delay to work, otherwise .delay won't run (only runs against animations and not add/remove class)

Miro Rauhala Over a year ago

I mean that now when jsfiddle.net/A8K3w/3 you hit Shake, it disappears after the animation is completed.

Collectives™ on Stack Overflow

jQuery CSS animations with addClass and removeClass

Define Shake?

What's the problem then?

3 Answers 3

4 Comments

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Define Shake?

What's the problem then?

3 Answers 3

4 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related