JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<ul>
    <li><a href="#" class="active" data-animate="150px">Click</a></li>
    <li><a href="#">Click</a></li>
    <li><a href="#">Click</a></li>
    <li><a href="#">Click</a></li>
</ul>

CSS

a {
 display: block;
  float: left;
   clear: left; 
}

JavaScript

$("a").bind("click", function(){
    var el = $(this);
    $("a.active").stop(true,true).animate({'marginLeft':'0'}, 500, function(){
        el.addClass('active').animate({'marginLeft':el.data('animate')}, 500);
    }); 
});