JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<section id="container1">
      <div class='fadeIt'>Burger King</div>
      <div class='fadeIt'>Renner</div>
      <div class='fadeIt'>Bradesco</div>
      <div class='fadeIt'>Burger King</div>
      <div class='fadeIt'>Renner</div>
      <div class='fadeIt'>Bradesco</div>
    </section>

CSS

.fadeIt{
      width: 100px; 
      height: 100px; 
      background-color: red; 
      display: none; 
      text-align: center; 
      float: left; 
      margin-right:10px;
      margin-bottom:10px;
  }

JavaScript

var btns = [];
    var btns2 = [];
    var marker = 0;

     $('.fadeIt').each(function(index) {
        btns.push($(this));
    });  

function loop() {
  setTimeout(function() {
      if(marker==0){
        var btn = btns.shift();
      }else{
        var btn = btns.pop();
      }              
         if(typeof btn !== "undefined")
         {
             btns2.push(btn);   
             btn.fadeIn();
             loop(); 
         }else{
             loopReverse();  
         }
  },300);
 };

function loopReverse() {
  setTimeout(function() {
        var btn = btns2.pop();   
         if(typeof btn !== "undefined")
         {
             btns.push(btn); 
             btn.fadeOut();
             loopReverse(); 
         }else{
             marker = 1;
             loop();  
         }
  },300);
 };

loop();