我正在尝试在具有最小高度的div上使用jQuerys slideToggle。这会导致动画跳跃而不能平滑移动。我花了一段时间寻找解决方案,但我无法得到任何工作。我已经在jsfiddle上做了一个例子,如果有人能帮我解决这个问题,我会很感激。
我的css正在切换div:
#selected-display{
height:calc(100vh - 50px);
display:none;
min-height: 750px;
}
我的javascript:
$(document).ready(function(){
$(".toggle-display").click(function(){
$("#selected-display").slideToggle("slow");
});
});
答案 0 :(得分:4)
https://jsfiddle.net/rqkt58L1/
您可以在动画期间禁用最小高度,然后在动画结束时将其重新打开:
$(document).ready(function () {
$(".toggle-display").click(function () {
var minHeight = $("#selected-display").css('min-height');
$("#selected-display").css('min-height',0).slideToggle("slow", function() {
$(this).css('min-height', minHeight);
});
});
});
答案 1 :(得分:0)
dave 的回答有效,但 min-height 没有动画。它只是“出现”
我用 javascript 解决了这个问题,没有使用 min-height:
function toggle(item) {
if (item.height() < 350) {
item.css('height', 350);
}
item.slideToggle();
}