JSFiddle - React, Tailwind, and code Playground

by Vaibhav Mehta

HTML

<div class="one">
    <span><img src="http://s27.postimg.org/hjopyy98v/frog01_999pxs.png" alt="" /></span>
</div>

<div class="two">
    <span><img src="http://s27.postimg.org/hjopyy98v/frog01_999pxs.png" alt="" /></span>
</div>

CSS

div {
    height: 100px;
    width: 100px;
    position: relative;
    border: 1px solid #f00;
    overflow: hidden;
    margin: 20px;
}

div span {
    height: 35px;
    width: 30px;
    border: 1px solid #000;
    position: absolute;
    left: 50%;
    margin-left: -15px;
    bottom: -35px;
    transition: all .5s;
}

JavaScript

var min = 200, max = 500;
var delay = Math.floor(Math.random() * (max - min) + min);

var min2 = 500, max2 = 700;
var delay2 = Math.floor(Math.random() * (max2 - min2) + min2);

$('div span').on('click', function() {
    alert('killed');
});

for(i = 0; i<=20; i++) {
    $('div.one span')
      .delay(delay)
      .queue( function(next){ 
        $(this).css('bottom','0'); 
        next(); 
      });
    
    
    $('div.one span')
      .delay(delay)
      .queue( function(next){ 
        $(this).css('bottom','-35px'); 
        next(); 
      });
    
    
    $('div.two span')
      .delay(delay2)
      .queue( function(next){ 
        $(this).css('bottom','0'); 
        next(); 
      });
    
    
    $('div.two span')
      .delay(delay2)
      .queue( function(next){ 
        $(this).css('bottom','-35px'); 
        next(); 
      });
}