14

我在.hide('slide')许多元素上使用 jQuery UI 的动画。问题是，当我margin在这些元素上指定 a 时，动画似乎会向下跳，一旦完成，就会返回到其原始位置。如果我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>

谁能解释这是什么原因，这是一个错误吗？

4

3 回答 3

9

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/

于 2013-04-16T09:35:30.170 回答
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/

于 2013-04-16T09:37:21.620 回答
0

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

于 2013-04-16T09:47:00.433 回答