Bootstrap alert boxes height animation with Zepto jumpy

Question

I'm trying to make a Bootstrap alert box smoothly hide when the user clicks the close button. However, Zepto is making the alert box behave in a very strange way:

I'm using the following code to handle the closing:

$(".alert .close").click(function(){
    $(this).parent().animate({"height": "0px"}, 400, function(){
        this.hide().css("height", "");
    });
})

Here is a fiddle: http://jsfiddle.net/ascom/HWaNj/

How can I make the alert box animate smoothly?

UPDATE: Adding height:0 to the alert box makes it look like this:

That probably means that something in Bootstrap is making the box behave like this.

Answer 1

It seems that it has to do with the lack of a predefined height and overflow. Also the use of margins and padding also skews the animation. Have a look at this for a working example.

$(".alert .close").click(function(event){
    $(this).parent().css('height',$(this).parent().height()+'px');
    $(this).parent().animate({
        "overflow":"hidden",
        "border-top":"none",
        "border-bottom":"none",
        "padding": "0 15px",
        "margin":0,
        "height": "0px"
    }, 400);
});

This will ask zepto to calculate the current height of the element so that we can animate it to 0.

http://jsfiddle.net/HWaNj/5/