JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div>
    <ul>
        <li>test</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
    </ul>
</div>

CSS

li {
    border: 1px solid;
    display: none;
}

JavaScript

function inOut( $li ) {
    $li
    .fadeIn(2000)
    .delay(100)
    .fadeOut(2000, function() {
        if ( $li.next().length > 0 ) {
            inOut( $li.next() );
        } else {
            inOut( $li.siblings().first() );
        }
    });
}

inOut( $('li').first() );