左侧菜单向左移动
tr里有两个td 要第一个td向左移动 第二个td随之占据第一个td的空间
下面代码无效 为什么？
如果写成 $("#d1").animate({width:"0px"}) 倒是动了 但是第一个td中是先看不见3 在看不见2 再看不见1 我要的效果是 先看不见1 再看不见2 再看不见3

<script src="jquery-1.4.2.min.js"></script>

<script>

function hid(){

	$("#d1").animate({left:"100px"})

	

}

</script>

<table><tr ><td id="d1" style="position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer">123</td><td>abc</td></tr></table>

<input type="button" onClick="hid()">

------解决方案--------------------
把 width 设为0就好了
------解决方案--------------------

<table>

	<tr >

		<td style="position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; overflow:hidden; cursor: pointer">

			<div id="d1" style="position:absolute; left:0px; width:100%; height:100%;">123</div>

		</td>

		<td>abc</td>

	</tr>

</table>

function hid(){

	$("#d1").animate({left:"-100px"});

}

------解决方案--------------------
设置table的margin-left

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<style>

body{margin:0px}

</style>

<script>

    function hid() {

        $("#d1").animate({ "margin-left": "-102px" });

    }

</script>

<table id="d1" cellpadding="0" cellspacing="0"><tr ><td style="position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer">123</td><td>abc</td></tr></table>

<input type="button" onClick="hid()">