如何用Jquery实现DIV由中间向两边展开的效果

* {
	margin: 0;
	padding: 0;
	outline: 0;
	vertical-align: baseline;
}

body {
	overflow: hidden;
}

div {
	height: 500px;
	text-align: center;
	line-height: 500px;
	margin: auto;
	cursor: pointer;
	border: 1px solid black;
	top: 0px;
	font-size: 100px;
}

div.center {
	width: 300px;
	background-color: blue;
}

div.left,div.right {
	position: absolute;
	display: none;
}

div.left {
	float: left;
	background-color: orange;
}

div.right {
	float: left;
	background-color: yellow;
}



	$ (function ()
    {
		var doms = init ();
		var center = doms[1], left = doms[0], right = doms[2];
		var width = center.width();
	    center.hover (function ()
	    {
		    left.show ().stop ().animate (
		    {
			    width : width + "px"
		    }, "slow");
		    right.show ().stop ().animate (
		    {
			    width : width + "px"
		    }, "slow");
	    }, function ()
	    {
		    left.stop ().animate (
		    {
			    width : "0px"
		    }, "slow", function ()
		    {
			    left.hide ();
		    });
		    right.stop ().animate (
		    {
			    width : "0px"
		    }, "slow", function ()
		    {
			    right.hide ();
		    });
	    });
    });
	
	$(window).resize (function ()
	{
		init ();
	});
	
	var init = function ()
	{
		var sw = screen.availWidth, sh = screen.availHeight;
	    var left = $ ("div.left").height(sh + "px"), 
	    center = $ ("div.center").height(sh + "px"), 
	    right = $ ("div.right").height(sh + "px");
	    center.width (sw / 3 + "px");
	    var w = center.prop ("offsetLeft");
	    var width = sw / 3;
	    left.css ("right", width + w + "px");
	    right.css ("left", width + w + "px");
	    return [left, center, right];
	}



	鬼