Question

I’m having an issue with my toggle function combined with the slide effect. I am trying to slide out a div element, which is floated, and have the neighboring div element (also floated left) slide to take it’s place. When I use jQuery UI as in the example below the slide animation is correct (just a slide left), but the floated element next to it waits until the animation is complete before moving.

With jQuery UI

In this example without jQuery UI, the neighboring element slides over as the other is sliding out, making for a very smooth transition. In this case the slide has both a left and top animation which is not what I am trying to achieve.

Without jQuery UI

I’m trying to find a solution for using jQuery UI as it’s already embedded in my site for other features.

Answer 1

Here is I have done something similar that you are looking for. 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;
}