$(document).ready(function(){
var items=$("#content>li");
var count=0;//Count to check present <li> element/tile
var previouscount;//Count to check previous <li> element/tile
var interval;
showtile();
function showtile()
{
var tilespeed=parseInt($(items[count]).attr("speed"));//Get speed
var tiledelay=parseInt($(items[count]).attr("data-delay"));//Get delay
$(items[count]).animate({top:"0px"}, tilespeed, function(){if(previouscount)
{//Check previous
$(items[previouscount]).animate({top:"200px"}, 1000);
}
});//animate tile
interval = window.clearInterval(interval);//clear the previous interval
interval = window.setInterval(function() { //Reset the interval
if (count <= (items.length - 1)) {//Check count for last tile
count++; //Increment count
previouscount = count - 1; //Set previous
showtile();//Recursion
}
if (count == items.length ) {//If last tile
previouscount=count-1;
count = 0;//Reset counter
showtile();//Recursion
}
}, tiledelay);//The next-tile delay
}
});
<div id="tileHoldings">
<ul id="content">
<li data-delay="3000" speed="1000">Your Content Here</li>
<li data-delay="3000" speed="1000" style="background-color:blue">Your Content Here 2<img src="http://arizonafoothillsmagazine.com/images/stories/april09/face-recognition.jpg"/></li>
<li data-delay="3000" speed="1000" style="background-color:green">Your Content Here 3</li>
<li data-delay="3000" speed="1000" style="background-color:yellow">Your Content Here 4</li>
</ul>
</div>
#tileHoldings{width:300px; height:200px; background-color:red; position:relative; overflow:hidden;}
li{height:200px; width:300px; position:absolute; left:0px; top:200px;}