떠 다니는 요소로 슬라이드가 흐르지 않습니다.

Question

슬라이드 전환 효과와 결합 된 토글 기능에 문제가 있습니다. 떠 다니는 div 요소를 밖으로 밀어 내고, 인접한 div 요소 (왼쪽으로 떠있었습니다)를 가져 와서 그 위치를 차지하려고합니다. 아래 예제에서와 같이 jQuery UI를 사용하면 슬라이드 애니메이션이 정확합니다 (왼쪽 슬라이드 만).하지만 이동하기 전에 애니메이션이 완료 될 때까지 옆에 떠 다니는 요소가 대기합니다. jQuery를 UI없이 본 예에서는

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