jquery - 切换 DIV 并缩小差距

Question

这是我想要实现的东西的简化版本

我有一个显示 3 个 div 框的页面

<div class="divd" id='div1' style="left:50px">>111</div>
<div class="divd" id='div2' style="left:150px">222</div>  
<div class="divd" id='div3' style="left:250px">333</div>
<p></p>
<p></p>
<p><input type="button"  id="tg" value="toggle"></p>

我正在使用 Jquery 来切换中间的 div

  $('#tg').click(function() { 
    $('#div2').toggle('slow', function() {
    });
  });   

这一切都按预期工作，但我想做的是通过隐藏 div 来“缩小差距”，所以最终结果是 div1 和 div3 彼此相邻这可以完成吗，任何指针或帮助非常感谢, 谢谢

.divd { 
position:absolute ; 
width: 50px;
height: 50px;   
top: 50px ;
left: 120px ; 
border: 1px solid black;
background-color:#999; 
border-radius:5px;  
z-index:200;
text-align:center;
}       

Answer 1

我假设您的元素是绝对定位的，如下所示:http://jsfiddle.net/agpHB/1/

你不需要那样做。试试这个:

http://jsfiddle.net/agpHB/2/

.divd {
    float: left;
    width: 150px;
    background-color: #eee;
}

<div class="divd" id="div1">111</div>
<div class="divd" id="div2">222</div>
<div class="divd" id="div3">333</div>

float 甚至不是绝对必要的。如果必须绝对定位，则需要在进行切换的同时将元素 3 滑动到元素 2 的位置。它不会那么简单。

更新:要回复您对其他元素的评论，请尝试这样的事情:http://jsfiddle.net/agpHB/3/