JQuery UI.hide( "слайд" ) странное поведение с полями

Я использую анимацию jQuery UI .hide('slide') для нескольких элементов. Проблема в том, что когда я укажу на 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>

Может ли кто-нибудь объяснить, в чем причина этого, является ли это ошибкой?

Ответ 1

div.ui-effects-wrapper обертывает элемент div.score перед анимацией (jQuery UI). Script вычисляет свою высоту с помощью метода outerHeight(true), включая поля http://api.jquery.com/outerHeight.

So div.ui-effects-wrapper height is div.score height + div.score margin → 52px

Но ваш элемент по-прежнему имеет правило margin, поэтому фактическая высота обертки 52px + 20px = 72px.

Я думаю, что это ошибка.

Вы можете использовать эту версию (с простой оболочкой) http://jsfiddle.net/vpetrychuk/s5U38/31/

Ответ 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/

Ответ 3

Вы можете использовать margin: auto 0 10px; или magin: auto 10px 10px; вместо margin: 10px;