jquery - 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

margin: auto 0 10px;またはmagin: auto 10px 10px;の代わりに使用できますmargin: 10px;