JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="current">List #1</li>
</ul>

JavaScript

for(var i = 2; i < 150; ++i) {
    $('ul').append($('<li>').text('List #' + i));
}

$('ul li').hide();

function Timer(callback, delay) {
    var timerId, start, remaining = delay;

    this.pause = function() {
        window.clearTimeout(timerId);
        remaining -= new Date() - start;
    };

    this.resume = function() {
        start = new Date();
        timerId = window.setTimeout(callback, remaining);
    };

    this.resume();
}

var currentTimer;
var timeBetween = 500;

function hideCurrentAndSetUpNext()
{
    var current = $('ul li.current:last');
    current.fadeIn();

    var next = current.next();
    if(next != null)
    {
        next.addClass('current');
        currentTimer = new Timer(hideCurrentAndSetUpNext, timeBetween);
    }
}

currentTimer = new Timer(hideCurrentAndSetUpNext, timeBetween);

$('ul li').hover(
    function() {
        currentTimer.pause();
    },
    function() {
        currentTimer.resume();
    }
);