JSFiddle - React, Tailwind, and code Playground

by danheberden

HTML

<div class="block" id="a">Anim 1</div>
<div class="block" id="b">Anim 2</div>
<div class="block" id="c">Anim 3</div>
<div id="oddBall">ODD BALL</div>
<div id="allDone">ALL DONE!!!</div>

CSS

.block {
    height:20px;
    width:50px;
}

#a { background: #FF0000; }
#b { background: #00FF00; }
#c { background: #0000CC; }

#oddBall {
    width:500px;
    height:40px;
    background:#ce7d51;
}

#allDone {
     background:#000000;
     color:#FFFFFF;  
     height:30px;
     font-size:28px;
     width:auto;
     display:none;
}

JavaScript

$.fn.animateDFD = function( props, options ) {
    options = options || {};
    var dfd = $.Deferred(),
        complete = options.complete,
        count = this.length;
    
    options.complete = function() {         
        complete && complete.call( this ); 
        if ( !--count ) {
            console.log( 'resolving the DFD once' );
            dfd.resolve(); 
        }    
    }
    $.fn.animate.call( this, props, options );
        
    return dfd.promise();
};


$.when( 
    $('.block').animateDFD({ 
            width: 200
        }, 
        { 
            duration: 1200,
            complete: function() {
                console.log('just got done with: ' + this.id );
            }
        }
    ),
    $('#oddBall').animateDFD({
            width: 100
        },
        {
            duration:1800,
            complete: function() {
                console.log('just got done with: ' + this.id );
            }
        }
    )       
).then( function() { 
       console.log('just got done with everything');
       $('#allDone').fadeIn(); 
    } 
);