滑動不與浮動元素流動

Question

我遇到了與滑動效果相結合的切換功能問題。我試圖滑出一個浮動的div元素，並讓相鄰的div元素（也浮動左）滑動到位。當我在下面的例子中使用jQuery UI時，幻燈片動畫是正確的（只剩下一張幻燈片），但是它旁邊的浮動元素會一直等到動畫完成後再移動。

With jQuery UI

在這個例子中沒有jQuery的用戶界面，相鄰元件滑過作爲另一個滑出，使得對於一個非常平滑的過渡。在這種情況下，幻燈片同時包含左側和頂部動畫，這不是我想要實現的。

Without jQuery UI

我試圖找到使用jQuery UI因爲它已經嵌入到我的網站的其他功能的解決方案。

Answer 1

這裏是我做了類似的事情，你正在尋找。 Jsfiddle demo

$('#toggle').bind('click',function() { 
    $("#wrapper").toggleClass('collapse'); 
    if ($("#wrapper").hasClass('collapse')) { 
    $('.collapse').animate({'margin-left':'-50px'}); 
    } 
    if (!$("#wrapper").hasClass('collapse')) { 
    $('#wrapper').animate({'margin-left':'0'}); 
    } 
});​ 

<div id="toggle">Slide</div> 
<div id="space"></div> 
<div id="wrapper"><div id="left"> 
</div> 

<div id="right"> 
    <div> 
</div> 
​ 
#wrapper { 
overflow:hidden; 
maegin-left:0; 
}