JSFiddle - React, Tailwind, and code Playground

by Derek Howard

HTML

<a href="#" class="click">click</a>
<div class="con">
<ul>
        <li></li>
        <li></li>
        <li></li>
            <li></li>
    
    
    </ul></div>

CSS

ul{display:block;width:110px;float:left;height:310px;background:#eee;overflow:hidden;}
li{display:block;width:100px;height:100px;background:#DDD;border-bottom:1px solid #FFF;margin-bottom:5px;}
.con{display:block;width:200px;height:300px;overflow:hidden;}

JavaScript

function animatethis(targetElement, speed) {
    $(targetElement).animate({ marginTop: "300px"},
    {
        duration: speed,
        complete: function ()
        {
            $(targetElement).css('marginTop','-450px');
            animatethis(targetElement, speed);
        }
    });
};

animatethis($('.con ul li:first-child'), 10000);