stackoverflow: Jquery box animation for shrinking and expanding more than one box at a time

http://stackoverflow.com/questions/18227783/jquery-box-animation-for-shrinking-and-expanding-more-than-one-box-at-a-time

HTML

<div id="container">
    <div id="outerbox1">
    <div id="box1">
    
    </div>
    </div>
    
    <div id="outerbox2">
    <div id="box2">
    
    </div>
    </div>
    
    <div id="outerbox3">
    <div id="box3">
    
    </div>
    </div>
</div>

CSS

body,
html {
	margin: 0px;
	padding: 0px;
}
#outerbox1,
#outerbox2,
#outerbox3 {
	background-color:#000;
	width: 200px;
	padding: 10px 5px;
	float: left;
}
#box1,
#box2,
#box3 {
	width: 100%;
	height: 180px;
	background-position:center;
	background-repeat:no-repeat;
}
#box1 {
    background-color: red;
}
#box2 {
    background-color: green;
}
#box3 {
	background-color: blue;
}

JavaScript

$("#container").hover(function() {
    //nothing
}, function() {
    $("#outerbox1").animate({ height: "200px" });
	$("#outerbox2").animate({ height: "200px" });
	$("#outerbox3").animate({ height: "200px" });
});

$("#outerbox1").hover(function(){
    $(this).animate({ height: "320px" });
	$("#outerbox2").animate({ height: "140px" });
	$("#outerbox3").animate({ height: "140px" });
}, function() {  
});

$("#outerbox2").hover(function(){
    $(this).animate({ height: "320px" });
	$("#outerbox1").animate({ height: "140px" });
	$("#outerbox3").animate({ height: "140px" });
}, function() {
});

$("#outerbox3").hover(function(){
    $(this).animate({ height: "320px" });
	$("#outerbox1").animate({ height: "140px" });
	$("#outerbox2").animate({ height: "140px" });
}, function() {
});