切換DIV和縮小差距

這是什麼一個簡化版本，我想實現切換DIV和縮小差距

我有一個顯示3個格箱

<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彼此相鄰的可以這樣做，任何指針或HEL p大加讚賞，感謝

.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; 
}

來源

2013-03-11 Mick

通過'旁邊的每個other'你在同一條直線是什麼意思？ – Ovilia 2013-03-11 14:18:27

你在說什麼？這一切看起來都很好http://jsfiddle.net/agpHB/ – Tomarinator 2013-03-11 14:19:09

是的，我完成的頁面中的div高度是我的頁面的高度 – Mick 2013-03-11 14:20:18

我假設你的元素絕對定位的，像這樣：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>

浮動甚至不是絕對必要的。如果您必須絕對定位，則需要在執行切換的同時將元素3滑動到元素2的位置。它不會那麼簡單。

UPDATE：爲了您關於其他元素的評論作出迴應，嘗試這樣：

來源

2013-03-11 14:22:35 isherwood

這是一個很好的解決方案，但最終我希望444在111之下，而且我似乎無法使用絕對定位來完成它。 – Mick 2013-03-11 14:34:10

你的問題中沒有444。 – isherwood 2013-03-11 14:36:27

查看我的答案更新。 – isherwood 2013-03-11 14:39:15

<script> 
flag=0; 
displayhide(x){ 
a=document.getElementById(x).style; 
if(flag=0) 
    { 
    a.display="block"; 
    flag=1; 
    } 
else 
    { 
    a.display="none"; 
    flag=0; 
    } 
} 
</script> 

and use 
<p><input type="button" id="tg" onclick="displayhide('div2')" value="toggle"></p>

來源

2013-03-11 14:33:38 Meeth

這可能會起作用，但它破壞了jQuery提供的動畫，而且非常麻煩。 – isherwood 2013-03-11 14:35:06

切換DIV和縮小差距

回答

相關問題