JSFiddle - React, Tailwind, and code Playground

by gion_13

CSS

ul li{
    display : none;
    border : 2px solid red;
    padding : 5px;
}

JavaScript

// ul creation
var ul = $('<ul/>').appendTo('body');
for(var i=1;i<20;i++)
    ul.append($('<li />').text('list item #' + i));

$.fn.fadeInEach = function(duration,callback){
    function fadeIn(i,elements,duration,callback){
        if(i >= elements.length)
            typeof callback == 'function' && callback();
        else
            elements.eq(i).fadeIn(duration,function(){
               fadeIn(i+1,elements,duration,callback);
            });        
    }
    fadeIn(0,this,duration,callback);
    return this;
} 
    ul.find('li').fadeInEach(100,function(){alert('animation has finished');});