javascript - 如何用javascript隐藏/显示div

Question

我想用 html 中的 div 实现隐藏/显示，但是用这种方式。

这是我的 html:

<div id="left"></div>
<div id="middle"> 
<input type="button" id="button"/>
</div>
<div id="right"></div>

这是我的 CSS:

body 
{ 
 height: 100%; 
 margin: 0; 
 padding: 0 ;
 border: 0 none;
}
#left
{
background-color:#EEEEEE;
height:570px;
width:73.9%;
float:left;
}
#center
{
background-color:#D4EAE4;
color:#535353;
height:570px;
width:15.25%;
float:left;
margin:0;
}
#right
{
background-color:#D4EAE4;
 float:left;
 width:11%;
 height:570px;
 margin:0;
}

当我单击 div center 上的按钮以隐藏 div right 并扩展 divleft 的大小时，我想这样做div right 然后将 div center 一直向右移动。我想用水平动画隐藏/显示它们，例如从左到右或从右到左。玩弄文字可能会很棘手，所以我制作了一些图片，这样您就可以真正明白我在说什么:

开始阶段:

结束阶段:

Answer 1

您可以在这里看到一个工作演示... http://jsfiddle.net/miqdad/3WDbz/

或者您可以在此处查看其他增加第一个 div 宽度的演示 .. http://jsfiddle.net/miqdad/3WDbz/1/