JSFiddle - React, Tailwind, and code Playground

sLIDING DIV EFFECT IMPRESSIVE

by refhat

HTML

<ul id="ticker">
    <li>
        Sample note 1
    </li>
    <li>
        Sample note 2
    </li>
    <li>
        Sample note 3
    </li>
</ul>

JavaScript

function ticker(el, duration) {
    if (!el) {
        return false;
    }
    else {
        el = typeof el === 'object' ? el : $(el);
        duration = duration || 500;
        $(el).find('li').first().slideUp(duration, function() {
            $(this)
                .insertAfter($(this).nextAll('li').last())
                .fadeIn(duration, function(){
                    ticker(el, duration);
                });
        });
    }
}

ticker(document.getElementById('ticker'), 300);