使用最小高度的jQuery幻灯片切换

using jQuery slide toggle with min height

本文关键字：jQuery 幻灯片 高度 小高      更新时间：2023-09-26

我正试图在具有最小高度的div上使用jQuerys slideTogle。这会导致动画跳跃而无法平滑移动。我花了一段时间寻找解决方案，但我什么都做不到。我在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/

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

dave的回答有效，但没有达到最小高度的动画。它只是"；出现"；

我已经用javascript解决了它，而不使用最小高度：

function toggle(item) {
    if (item.height() < 350) {
        item.css('height', 350);
    }
    item.slideToggle();
}
相关文章：