jQuery UI.hide('slide') strange behaviour with margins

Question

I'm using jQuery UI's .hide('slide') animation on a number of elements. The problem is that when I specify a margin on these elements, the animation seems to jump down, and once complete, returns to its original position. If I remove the margin from these elements, the problem ceases to exist.

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>

Could anyone explain what the reason for this is, is it a bug?

Answer 1

div.ui-effects-wrapper wraps you element div.score before animation (jQuery UI). Script calculates its height with outerHeight(true) method including margins http://api.jquery.com/outerHeight.

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

But your element still has margin rule, so actual wrapper height is 52px + 20px = 72px.

I think this is a bug.

You can use this version (with simple wrapper) http://jsfiddle.net/vpetrychuk/s5U38/31/

Answer 2

I solve this with another div as container, which has needed margin and counter itself has no margin:

HTML

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

CSS

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

http://jsfiddle.net/nPjEG/