JSFiddle - React, Tailwind, and code Playground

by shaunakv1

HTML

<div class="hasEffects effect1"> Div 1</div>
<div class="hasEffects effect2"> Div 2</div>
<div class="hasEffects effect3"> Div 3</div>

<button id="animate">animate</button>

JavaScript

effects1 = function(){
    $(".effect1").effect("shake", {}, 1000);
    return $(".effect1");
};

effects2 = function(){
    $(".effect2").effect("shake", {}, 1000);
    return $(".effect2");
};

effects3 = function(){
    $(".effect3").effect("shake", {}, 1000);
    return $(".effect3");
};

$("#animate").click(function(){
    runAnimations([effects1,effects2,effects3]);
});

runAnimations = function(functionArray){
    var func = functionArray.splice(0,1);
      func[0]().promise().done(function(){
        if(functionArray.length > 0 ) runAnimations(functionArray);
      });

}