滑动不随浮动元素流动答案

【问题标题】：Sliding doesn't flow with floated elements滑动不随浮动元素流动
【发布时间】：2012-03-08 12:08:29
【问题描述】：

我的切换功能与幻灯片效果相结合时遇到问题。我试图滑出一个浮动的 div 元素，并让相邻的 div 元素（也向左浮动）滑动以取代它。当我在下面的示例中使用 jQuery UI 时，幻灯片动画是正确的（只是向左滑动），但它旁边的浮动元素会等到动画完成后再移动。

With jQuery UI

在这个没有 jQuery UI 的示例中，相邻元素滑出时另一个元素滑出，从而实现了非常平滑的过渡。在这种情况下，幻灯片同时具有左侧和顶部动画，这不是我想要实现的。

Without jQuery UI

我正在尝试寻找使用 jQuery UI 的解决方案，因为它已经嵌入到我的网站中以提供其他功能。

【问题讨论】：

标签： jquery jquery-ui

【解决方案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;
}

【讨论】：

谢谢！它看起来不错，而且绝对有效。似乎是一个有效的解决方法。如果没有其他人提出任何建议，我会接受你的作为答案。