JSFiddle - React, Tailwind, and code Playground

by dafin defandaky

HTML

<ul id="blog-roll">
    <li><a href="#">Nama Blog 1</a></li>
    <li><a href="#">Nama Blog 2</a></li>
    <li><a href="#">Nama Blog 3</a></li>
    <li><a href="#">Nama Blog 4</a></li>
    <li><a href="#">Nama Blog 5</a></li>
    <li><a href="#">Nama Blog 6</a></li>
    <li><a href="#">Nama Blog 7</a></li>
    <li><a href="#">Nama Blog 8</a></li>
    <li><a href="#">Nama Blog 9</a></li>
    <li><a href="#">Nama Blog 10</a></li>
    <li><a href="#">Nama Blog 11</a></li>
    <li><a href="#">Nama Blog 12</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() {
    anim = setInterval(roll, 3000);
});