JSFiddle - React, Tailwind, and code Playground

by pazzesco

HTML

<div id="squirrelContainer">
    <img src="https://image.flaticon.com/icons/png/512/3564/3564180.png" class="squirrel default" style="background-color: red;">
    <img src="https://image.flaticon.com/icons/png/512/3601/3601634.png" class="squirrel" style="background-color: blue;">
    <img src="https://image.flaticon.com/icons/png/512/3522/3522882.png" class="squirrel" id = "3" style="background-color: green;">
    <img src="https://image.flaticon.com/icons/png/512/3522/3522903.png" class="squirrel" style="background-color: yellow;">
</div>

CSS

#squirrelContainer{   position: relative;}

.squirrel{
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
    width: 100px;
    height: 100px;
}

.squirrel.default{    display: block;}

JavaScript

(function($) { 
    $(document).ready(function () {
		var count = 0;
        setTimeout( 
  					function() 
  						{
			alert('kur');
              $('.squirrel').hide();
              var next = $('.squirrel').next();
              if (next.length == 0){
                  next = $('.squirrel').parent().find('.squirrel').first();
				count = -1;
			  }            
        next.show();
		
		
			
        });
    });
})(jQuery);