JSFiddle - React, Tailwind, and code Playground

by Mamdouh Freelancer

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='animate1'>
  <img src='http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d' />
  <img src='http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d' />
  <img src='http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d' />
  <img src='http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico?v=4f32ecc8f43d' />

</div>

JavaScript

var go = true;

function anim() {
  var ml = go ? '220px' : '-150px',
    mb = go ? '20px' : '0px';
  go = !go;
  $("#animate1").fadeIn('slow').animate({
    'margin-left': ml,
    'margin-bottom': mb
  }, 2000, function() {
    $("#animate1 img").each(function(i) {
      $(this).animate({
        'opacity': '0'
      }, (i + 1) * 500, function() {
        if (i == $("#animate1 img").length - 1) {
          $("#animate1 img").animate({
            'opacity': '1'
          });
          anim();
        }
      })
    });

  });

}

anim();