jQuery UI.hide（'slide'）带边距的奇怪行为

Question

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

I've set up a simplified example fiddle showing the problem

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-wrapper在动画（jQuery UI）之前包装元素div.score。脚本使用outerHeight(true)方法计算其高度，包括边距http://api.jquery.com/outerHeight。

因此div.ui-effects-wrapper身高为div.score身高+ div.score保证金 - ＆gt; 52px

但是你的元素仍然有边距规则，因此实际的封装高度为52px + 20px = 72px。

我认为这是一个错误。

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

Answer 2

我用另一个div作为容器来解决这个问题，它需要保证金，而计数器本身没有保证金：

<强> HTML

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

<强> CSS

div.slideContainer {
    width: 32px;
    height: 32px;
    margin: 10px;
}

http://jsfiddle.net/nPjEG/

Answer 3

您可以使用margin: auto 0 10px;或magin: auto 10px 10px;代替margin: 10px;