JSFiddle - React, Tailwind, and code Playground

by Eric Hynds

HTML

<div>foo</div>
<div>bar</div>
<div>baz</div>

CSS

div { border:1px solid red; display:none }

JavaScript

// yes, there are better ways to do this.
// this is just an exercise.

$.fn.queueFade = function( direction, callback ) {
    var q = new $.fn.init( {} ), elems = this;
    
    elems.each(function(){
        var elem = $(this);
        
        q.queue(function( next ){
            elem[ 'fade' + direction ]( 1000, next );
            
            console.log( next );
            
            if( !next ){
                callback.call( elems );
            }
        });
    });
    
    return this;
};

$('div').queueFade('In').queue(function(){
    $(this).css('border-color', 'green').dequeue();
});