jQuery UI 스케일 효과 애니메이션 경계가 애니메이션 중에 정적으로 유지됩니다.

Question

상자를 클릭하면 크기가 축소되고 완전히 사라진 후에 만 ​​다른 상자가 해당 위치로 이동합니다. 상자가 축소 된 요소 크기에 비례하여 이동하기 시작하여 전환이보다 ​​자연스럽게 보일 수 있도록이 작업을 변경할 수 있습니까?

http://jsfiddle.net/XuDxR/

<div id="d0">AAAAAA</div> 
<div id="d1">AAAAAA</div> 
<div id="d2">AAAAAA</div> 
<div id="d3">AAAAAA</div> 
<div id="d4">AAAAAA</div>​ 

$('div').on('click', function (e) { 
    $(this).effect("scale", { 
     mode: 'hide', easing: 'easeOutBounce' 
    }, 500); 
}); 
​ 

div 
{ 
display:inline-block; 
    border:1px solid black; 
}​ 

Answer 1

이 시도 :

$(this).animate({ width:0,height:0}, 
       { 
        duration:500, 
        easing:'easeOutBounce', 
        complete:function(){ 
         $(this).css('display','none'); 
        } 
       } 
);