JSFiddle - React, Tailwind, and code Playground

by Daedalus

HTML

<ul class="fader">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>

JavaScript

$(document).ready(function() {

    $('.fader > li').hide();
    fade();

    function fade() {
        var duration = 1000;
        $('.fader > li').each(function(i) {
            $(this).delay(i * (duration * 2)).fadeIn(duration).fadeOut(duration, function() {
                if ((i + 1) == $('.fader > li').length) {
                    fade();
                }
            });
        });

    }

});