JSFiddle - React, Tailwind, and code Playground

by jsumners

HTML

<ul class="spy">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

CSS

li {
    height: 35px;
    outline: 1px solid red;
}

JavaScript

$(function() {
    var $list = $('.spy'),
        currentItem = 4,
        height = $list.children(':first').height(),
        interval = 4000,
        items = [],
        limit = 4,
        spy = function() {},
        total = 0;

    $.fn.log = function() {
        console.log(this);
        return this;
    };

    $list.children().each(function() {
        items.push(this.innerHTML);
        total += 1;
    });

    // Trim the list
    $list.children(':gt(' + (limit - 1) + ')').remove();

    spy = function() {
        var $insert = $(["<li>", items[currentItem], "</li>"].join('')).css({
            height: 0,
            opacity: 0
        }).prependTo($list);

        $list.children(':last').animate({
            opacity: 0
        }, 1000, function() {
            $insert.animate({
                height: height
            }, 1000).animate({
                opacity: 1
            }, 1000);

            $(this).animate({
                height: 0
            }, 1000).delay(1000).remove();
        });

        currentItem += 1;
        if (currentItem >= total) {
            currentItem = 0;
        }

        setTimeout(spy, interval);
    };

    spy();
});