JSFiddle - React, Tailwind, and code Playground

by aiizahh

HTML

<ul id="blog-roll">
    <li><a href="#">Alya Zahra 1</a></li>
    <li><a href="#">Alya Zahra 2</a></li>
    <li><a href="#">Alya Zahra 3</a></li>
    <li><a href="#">Alya Zahra 4</a></li>
    <li><a href="#">Alya Zahra 5</a></li>
    <li><a href="#">Alya Zahra 6</a></li>
    <li><a href="#">Alya Zahra 7</a></li>
    <li><a href="#">Alya Zahra 8</a></li>
    <li><a href="#">Alya Zahra 9</a></li>
    <li><a href="#">Alya Zahra 10</a></li>
</ul>

JavaScript

var $ul = $('#blog-roll'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    },
    anim = setInterval(roll, 3000);

// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    setInterval(roll, 3000);
});