引导警报框高度动画与Zepto跳跃

Question

我正在尝试在用户单击关闭按钮时平滑隐藏Bootstrap警报框。但是，Zepto正在以一种非常奇怪的方式表现警报框：

我正在使用以下代码来处理结束：

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

这是一个小提琴：http://jsfiddle.net/ascom/HWaNj/

如何让警报框平滑动画？

UPDATE：在警告框中添加高度：0使其如下所示：

这可能意味着Bootstrap中的某些东西使得这个盒子表现得像这样。

Answer 1

它似乎与缺少预定义的高度和溢出有关。边距和填充的使用也会扭曲动画。看看这个工作实例。

$(".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);
});

这将要求zepto计算元素的当前高度，以便我们可以将其设置为0。

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