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 1.7

(function($) { 
    $(document).ready(function () {
        setTimeout( 
  					function() 
  						{ alert('kur');
            $(this).hide();
            var next = $(this).next();
            console.log(next.length);
            if (next.length == 0)
                next = $(this).parent().find('.squirrel').first();
            
            next.show();
}, 3000/*
    						//console.log('count1:' + count);
							//alert('kur2');
							that.hide();
            				var next = that.next();
							//console.log(next.length);           
            				next.show();
							//console.log('count2:' + count);
							count++;
  						*/
				);
	   
    });
})(jQuery);