使用最小高度的 jQuery 滑动切换答案

【问题标题】：using jQuery slide toggle with min height使用最小高度的 jQuery 滑动切换
【发布时间】：2015-03-06 00:02:16
【问题描述】：

我正在尝试在具有最小高度的 div 上使用 jQuerys slideToggle。这会导致动画跳跃而不平滑移动。我现在花了一段时间寻找解决方案，但我无法让任何工作。我在 jsfiddle 上做了一个例子，如果有人能帮我解决这个问题，我将不胜感激。

正在切换的 div 的 css：

#selected-display{
    height:calc(100vh - 50px);
    display:none;
    min-height: 750px;
}

我的javascript：

$(document).ready(function(){
    $(".toggle-display").click(function(){
        $("#selected-display").slideToggle("slow");

    });
});

https://jsfiddle.net/4y3q27mh/

【问题讨论】：

标签： javascript jquery html css slidetoggle

【解决方案1】：

https://jsfiddle.net/rqkt58L1/

您可以在动画期间禁用 min-height，然后在动画结束时将其重新打开：

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

【讨论】：

【解决方案2】：

由 dave 作品回答，但没有动画到最小高度。它只是“出现”

我已经用 javascript 解决了，没有使用 min-height：

function toggle(item) {
    if (item.height() < 350) {
        item.css('height', 350);
    }
    item.slideToggle();
}

【讨论】：