JSFiddle - React, Tailwind, and code Playground

by andredgusmao

HTML

<div class="container">
    <div class="div">Guama Conselheiro</div>
    <div class="div">UFPa Pedreira</div>
    <div class="div">Jurunas Marambaia</div>
    <div class="div">Icoaraci alm</div>
    <div class="div">Cidade nova 4</div>
</div>

<button class="magica">Consultar rotas</button>

CSS

.container {
    width: 65%;
    overflow: hidden;
}

.div {
    background-color: #FF0;
    margin: .5em 0;
    width: 60%;
}

JavaScript

var magic = function() {
    var i = 0;
    while(i < 5) {
        var div = $('.div').eq(i);
        div.delay(200*(i)).animate({marginLeft: '0px'}, 400, function() {
            $(this).animate({marginLeft: '5%'}, 300, 'linear', function(){
                $(this).animate({marginLeft: '0px'}, 500);
            });
        });
        i++;
    }
};
$('.div').css({marginLeft: '-65%'});

$(document).ready(function(){
    magic();
    $('.magica').click(function() {
        $('.container').animate({marginLeft: '80%', opacity: '0'}, 600, function(){
            $('.div').css({marginLeft: '-65%'});
            $('.container').css({marginLeft: '0', opacity: '1'});            
            magic();
        });
    });
});