Animate.css shake effect not working every time

Question

I'm making a Twitch Streamer application, that pulls some data using Twitch API, for a predetermined set of streamers.

I have three buttons to select all/online/offline channels, and I am looking to add the animated shake effect to all these buttons.

On my first attempt, I had a simple if/else check in place to make the shake work correctly - detect if the animated shake class already exists, if so, remove it, and then add it again. Else, just add it.

That didn't work. I found an answer here on SO that said it won't work that way because the addClass and removeClass occur so fast that the DOM doesn't have time to catch up.

I then used a queue with an anonymous function to add the class back after inducing a slight delay after the removeClass -

if ($(this).hasClass("animated shake")) {
            $(this).removeClass("animated shake").delay(50).queue(
                function() {
                    $(this).addClass("animated shake");
                });
            //$(this).addClass("animated shake");
        } else {
            $(this).addClass("animated shake");
        }

Now, the shake effect works like 90% of the time, but if you keep switching back and forth between online/offline channels, there will be cases in between where the shake doesn't work.

Here's the app on Codepen .

I'd appreciate any help as to why it doesn't work every single time .

Note - The shake effect is on the online/offline buttons only, for now.

Answer 1

This works everytime :-D

 function shakeButton($button) { console.log('Shaking button') $button.removeClass("animated shake"); setTimeout( function() { $button.addClass("animated shake"); }, 25 ); } $('button').click(function() { shakeButton($(this)); }); 

 <!-- Never mind, Just some Dummy html... --> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h4>Never mind this, Just some Dummy Results</h4> <h3>Check out the JS instead</h3> <button>Button 1</button> <button>Button 2</button> <button>Button 3</button> 

I just used setTimeout instead .delay() And it worked a treat :-)

Good Job, Your code is nice and well documented :-DA Few things though...

1. In your code... you repeat the same code at three places, Instead you can create a function with that code and call that function everywhere instead ;-) This will make debugging easier.
2. The if statement you use is not necessary... Just remove animate and shake classes every time ( it won't throw any error ;-) ) and add them after some time again, this will make code simpler.

This code is implemented in this snippet... http://codepen.io/shramee/pen/EyZJjN

Answer 2

can you try something like this?

$('.btn').on('click', function()
{
    // Siblings will target other buttons but not the current one
    $(this).addClass('animated shake').siblings().removeClass('animated shake');
});

[EDIT] more relevent to your structure:

According to your example structure you can add a class to your buttons wrapper like .btnWrapper for convenience and do:

$('.btn').on('click', function()
{
    var clicked = $(this);
    clicked.addClass('animated shake').parents('.btnWrapper').siblings().find('.shake').removeClass('animated shake');
})