带有 Zepto 跳跃的引导警报框高度动画

Question

我正在尝试在用户单击关闭按钮时平滑地隐藏 Bootstrap 警报框。然而，Zepto 使警报框以一种非常奇怪的方式运行：

我正在使用以下代码来处理关闭：

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

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

如何使警报框动画流畅？

更新： 将 height:0 添加到警告框使其看起来像这样：

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

Answer 1

这似乎与缺少预定义的高度和溢出有关。此外，margin 和 padding 的使用也会扭曲动画。看看这个作为一个工作示例。

$(".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/