JSFiddle - React, Tailwind, and code Playground

by andredgusmao

HTML

<button class="ativar">Ativar a parada</button>
<button class="desativar">Desativar a parada</button>

<ul class="list">
    <li class="item">Prato 1</li>
    <li class="item">Prato 2</li>
    <li class="item">Prato 3</li>
    <li class="item">Prato 4</li>
    <li class="item">Prato 5</li>
</ul>

CSS

.list {
    list-style: none;
    margin: 1em;
    padding: 0;
}

.item {
    background: -moz-linear-gradient(19% 75% 90deg, #355E95, #4265D6);
    box-shadow: 0 2px 3px #373737;
    color: #FFF;
    margin: .5em 0;
    padding: .8em;    
    width: 90%;
}

JavaScript

var wd = $('.item:first').width();
$('.item').css({marginLeft: "-120%"});

jQuery.fn.reverse = [].reverse;
jQuery.fn.super = function(speed, easing, callback) {
    var $this = $(this);
    speed = speed || 500;
    return $this.animate({marginLeft: 0}, speed, function(){

    });
}
jQuery.fn.unsuper = function(speed, easing, callback) {
    var $this = $(this);
    speed = speed || 500;
    return $this.animate({marginLeft: "-120%"}, speed, function(){
    });
} 

$('.ativar').on('click', function(){
    $(".item").each(function(i){
        $(this).delay(i*300).super(500);
    });    
});

$('.desativar').on('click', function(){
    $(".item").reverse().each(function(i){
        $(this).delay(i*300).unsuper();
    });    
});