$(document).ready(function() 
{
  jQuery.easing.def = 'easeOutBounce';
	// $('<div id="controls">').appendTo('#examples');
	//When mouse rolls over
	
	$(".ps").mouseover(function(){
		$(this).stop().animate({width:'114px'},{queue:false, duration:1000})
	});
	$(".dw").mouseover(function(){
		$(this).stop().animate({width:'102px'},{queue:false, duration:1000})
	});
	$(".fl").mouseover(function(){
		$(this).stop().animate({width:'85px'},{queue:false, duration:1000})
	});
	$(".ai").mouseover(function(){
		$(this).stop().animate({width:'100px'},{queue:false, duration:1000})
	});
	$(".ae").mouseover(function(){
		$(this).stop().animate({width:'107px'},{queue:false, duration:1000})
	});
	$(".html").mouseover(function(){
		$(this).stop().animate({width:'103px'},{queue:false, duration:1000})
	});
	
	
	$(".ps").mouseout(function(){
		$(this).stop().animate({width:'30px'},{queue:false, duration:600})
	});
	$(".dw").mouseout(function(){
		$(this).stop().animate({width:'30px'},{queue:false, duration:600})
	});
	$(".fl").mouseout(function(){
		$(this).stop().animate({width:'30px'},{queue:false, duration:600})
	});
	$(".ai").mouseout(function(){
		$(this).stop().animate({width:'30px'},{queue:false, duration:600})
	});
	$(".ae").mouseout(function(){
		$(this).stop().animate({width:'30px'},{queue:false, duration:600})
	});
	$(".html").mouseout(function(){
		$(this).stop().animate({width:'30px'},{queue:false, duration:600})
	});
	
		
});