jquery - 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');
                  }
                }
);