Question

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

With jQuery UI

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

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

滑动不会与浮动元素一起流动

1 个答案: