我正在尝试在用户单击关闭按钮时使 Bootstrap 警告框平滑地隐藏。然而,Zepto 使警告框以一种非常奇怪的方式运行:
我正在使用以下代码来处理关闭:
$(".alert .close").click(function(){
$(this).parent().animate({"height": "0px"}, 400, function(){
this.hide().css("height", "");
});
})
这是一个 fiddle :http://jsfiddle.net/ascom/HWaNj/
如何使警告框动画流畅?
更新: 将 height:0 添加到警告框使其看起来像这样:
这可能意味着 Bootstrap 中的某些东西使盒子表现得像这样。
最佳答案
好像是没有预定义的高度和溢出有关。此外,边距和填充的使用也会扭曲动画。看看这个工作示例。
$(".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。
关于javascript - 使用 Zepto jumpy 的 Bootstrap 警告框高度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22649046/