jQuery UI.hide('slide')带边距的奇怪行为

Question

我在.hide('slide')许多元素上使用jQuery UI的动画.问题是当我margin在这些元素上指定一个时,动画似乎跳了下来,一旦完成,就会返回到原来的位置.如果我margin从这些元素中删除,问题就不复存在了.

我已经设置了一个简化的示例小提示来显示问题

CSS

div.score {
    width: 32px;
    height: 32px;
    background-color: blue;
    color: white;
    text-align: center;
    margin: 10px;
    padding-top: 6px;
}

jQuery的

$('div.score').click(function() {
    var $this = $(this);
    $this.hide('slide', { direction: 'right' }, 250, function() {
        $this.show('slide', { direction: 'left' }, 250)
             .text(parseInt($this.text(), 10) + 1);
    });
});

HTML

<div class="score">0</div>
<div class="score">0</div>

任何人都可以解释这是什么原因,这是一个错误吗？

Answer 1

div.ui-effects-wrapperdiv.score在动画(jQuery UI)之前包装元素.脚本使用outerHeight(true)包括边距http://api.jquery.com/outerHeight在内的方法计算其高度.

所以div.ui-effects-wrapper身高是div.score高度+ div.score边距 - >52px

但是你的元素仍然有边距规则,所以实际的包装高度是52px + 20px = 72px.

我认为这是一个错误.

您可以使用此版本(使用简单的包装器) http://jsfiddle.net/vpetrychuk/s5U38/31/