JSFiddle - React, Tailwind, and code Playground

by JonNorman

HTML

<div id="topTen">
    <div>
        <h2>Top ten Shoes</h2>
        <ol>
            <li>Red Shoes</li>
            <li>Blue Shoes</li>
            <li>Green Shoes</li>
        </ol>
    </div>
    <div>
        <h2>Top ten Shirts</h2>
        <ol>
            <li>Blue Shirts</li>
            <li>Green Shirts</li>
            <li>Red Shoes</li>
        </ol>
    </div>
    <div>
        <h2>Top ten Ties</h2>
        <ol>
            <li>Red Ties</li>
            <li>Blue Ties</li>
            <li>Green Ties</li>
        </ol>
    </div>
</div>

JavaScript

$(document).ready(function() {

    function doFade(selector) {
        if ($(selector).length < 2) return;
        if ($(selector).filter(":visible").length == 1) {
            $(selector).filter(":visible").fadeOut("slow", function() {
                ($(this).next().length ? $(this).next() : $(this).siblings(":eq(0)")).fadeIn("slow", function() {
                    setTimeout(function() {
                        doFade(selector)
                    }, 4000);
                });
            });
        } else {
            $(selector).not(":first").hide();
            setTimeout(function() {
                doFade(selector)
            }, 4000);
        }
    }
    doFade("#topTen>div");

});