$(document).ready(function() {
    // sets the length of each animation
    var duration = '100';
    // sets the type of easing you want
    var easing = 'easeInQuart';
	
	
	
    $("#first-div").hover(function(){
        $("#first-div").animate({"left": "0px"},
            {queue:false, duration:duration, easing:easing});
        $("#second-div").animate({"left": "420px"},
          {queue:false, duration:duration, easing:easing});
        $("#third-div").animate({"left": "540px"},
            {queue:false, duration:duration, easing:easing});
		$("#fourth-div").animate({"left": "660px"},
			{queue:false, duration:duration, easing:easing});
    });
	
	
	
    $("#second-div").hover(function(){
        $("#first-div").animate({"left": "0px"},
             {queue:false, duration:duration, easing:easing});
        $("#second-div").animate({"left": "120px"},
             {queue:false, duration:duration, easing:easing});
        $("#third-div").animate({"left": "540px"},
            {queue:false, duration:duration, easing:easing});
		$("#fourth-div").animate({"left": "660px"},
			{queue:false, duration:duration, easing:easing});
	});
	
	
	
    $("#third-div").hover(function(){
        $("#first-div").animate({"left": "0px"},
            {queue:false, duration:duration, easing:easing});
        $("#second-div").animate({"left": "120px"},
            {queue:false, duration:duration, easing:easing});
        $("#third-div").animate({"left": "240px"},
            {queue:false, duration:duration, easing:easing});
		$("#fourth-div").animate({"left": "660px"},
			{queue:false, duration:duration, easing:easing});
    });
	
	
	
	$("#fourth-div").hover(function(){
        $("#first-div").animate({"left": "0px"},
            {queue:false, duration:duration, easing:easing});
        $("#second-div").animate({"left": "120px"},
            {queue:false, duration:duration, easing:easing});
        $("#third-div").animate({"left": "240px"},
            {queue:false, duration:duration, easing:easing});
		$("#fourth-div").animate({"left": "360px"},
			{queue:false, duration:duration, easing:easing});    
	});
	
});