JSFiddle - React, Tailwind, and code Playground

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));

function fadeInOut(i,elements,duration,pause,callback){
    if(i >= elements.length){
        elements.eq(i-1).fadeOut(duration,function(){
        alert(i);
        		elements.eq(i).fadeIn(duration,function(){
       					setTimeout(function(){ fadeInOut(0,elements,duration,callback); }, pause);
     				});
     		});
    } else {
     elements.eq(i-1).fadeOut(duration,function(){
        		elements.eq(i).fadeIn(duration,function(){
       					setTimeout(function(){ fadeInOut(i+1,elements,duration,callback); }, pause);
     				});
     		});
    }      
}

fadeInOut(1,ul.find('li'),1000,2000,function(){console.log("animation finished!");});