Question: I am trying to write a function that can remove elemnts from the DOM, but I am facing a problem I can't solve.

The code looks like this:

```
function closeMessage(message) {
    var height = $(message).outerHeight();
    $(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0}, function(){
        $(message).remove();
    });
}

```

The variable `message` is the element to be removed. Inside the CSS I've assigned `margin-top` and `margin-bottom` to the message-element.

When the above function is executed, the message-element fades to 0.01% opacity (= nearly invisible but still there) and then the negative margin creates the effect that the content below the message-element slides up. After that in the callback, the message-element is removed from the DOM.

The problem is, that the content below the messages-elements jumps the last few pixels to the top, like a small jolt. That jolt is only noticeable when more than one message box is present. It also gets more noticable the bigger the margins are set. As you can see I have tried so solve the problem with `marginBottom: 0`, but it's not working.

I also tried jQuery's the different `height();` functions like `outerHeight();`, `outherHeight(true);` and `innerHeight();` but that didn't solved the problem.

So my questions are: Is something wrong in the above code? Why is there that small 'jump' in the end-phase of the animation? Is this normal behavior?

Answer: 
The first problem is that `outerHeight` does not take into account margins without passing `true` to it:

```
var height = $(message).outerHeight(true);
$(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0}, function(){
    $(message).remove();
});

```

The second problem is that by CSS definition the vertical margins of adjacent elements collapse, meaning the bottom margin overlaps the top margin of the next element. This makes the calculation more difficult unless all of the top/bottom margins are always the same.

**Edit:** I think the following should work as long as you don't have negative margins or anything really strange:

```
function closeMessage(message) {
    var pBot = 0;

    if ($(message).prev().length) {
        pBot = parseInt($(message).prev().css('marginBottom'));
    }

    var height = $(message).outerHeight();
    $(message).fadeTo("fast", 0.01).animate({
        marginTop: -height-pBot+'px',
        marginBottom: pBot+'px'
    }, 'linear', function() {
        $(message).remove();
    });
}

```

This makes the element that is going away collapse its top-margin, by negating the margin of the element above it and making the element "disappear" by subtracting its height (without margins), at the same time setting its own bottom-margin to same as the element above it, essentially matching what will be there when it disappears. It seems to work fine, and you only need to worry about the previous margin, because the next is handled automatically.

Example: <http://jsfiddle.net/FxR9M/>

My own example that helps to see what's going on: <http://jsfiddle.net/5PRy2/2/>
jQuery animate function uses a default easing function called swing. Try changing your code to use the 'linear' easing function. 

```
$(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0},'linear', function(){
        $(message).remove();
    });

```

Check out the documentation [here](http://api.jquery.com/animate/)