All apps 5 button

by Aldi Unanto

HTML

<div class="container">
    <div class="logo"></div>
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="fourth"></div>
    <div class="fifth"></div>
</div>

CSS

body{ margin: 0; }
.container{
    position: relative;
    width: 500px;
    margin: 10px auto;
    border: 1px solid #000;
}
.container > div{
    display: inline-block;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 150px; left: 200px;
}
.container > .first{ background-color: #c2c1c1; }
.container > .second{ background-color: #ff0000; }
.container > .third{ background-color: #1316aa; }
.container > .fourth{ background-color: yellow; }
.container > .fifth{ background-color: green; }
.container > .logo{ border: 2px solid #000; display: none; }

JavaScript

$(function(){
    $(".fifth").animate({top: '-=100'}, 250, function(){
    	$(".fourth").animate({left: '+=120'}, 250, function(){
    		$(".third").animate({left: '-=120'}, 250, function(){
    			$(".second").animate({left: '+=90', top: '+=100'}, 250, function(){
    				$('.first').animate({left: '-=90', top: '+=100'}, 250, function(){
    					$('.logo').fadeIn();
    				});
    			});
    		});		
    	});
    });
});