高度设置为“自动”不适用于 JS 动画

height set to "auto" not working with JS animate

本文关键字：不适用 适用于 JS 动画 自动 设置 高度      更新时间：2023-09-26

我尝试在下面的代码中将高度设置为"auto"，以便DIV根据内容调整其大小。不幸的是，这行不通。（如果我以 px 为单位设置高度，没问题）。知道为什么以及如何解决这个问题吗？非常感谢

在这里摆弄。

.JS

$("a").click(function () {
    var page = $(this).data("page");
    if ($('div:animated').id != page) {
        var active = $(".fold.active");
        // if there is visible fold element on page (user already clicked at least once on link)
        if (active.length) {
            active.animate({
                width: "0"
            }, 200)
                .animate({
                height: "0"
            }, 200, function () {
                // this happens after above animations are complete
                $(this).removeClass("active");
            })
            // clicking for the first time
        }
        if (active.attr("id") != page) {
            $("#" + page)
                .addClass("active")
                .animate({
                height: "auto"
            }, 1000, 'linear')
                .animate({
                width: "200px"
            }, 400, 'linear')
        }
    }
});
你需要

计算jQuery animate()发生的height

演示 - http://jsfiddle.net/7hcsv5dn/

var el = $("#" + page)
autoHeight = el.height(),
    $("#" + page)
    .addClass("active")
    .animate({
        height: autoHeight
     }, 1000, function () {
        el.height('auto');
     })
     .animate({
        width: "200px"
     }, 400, 'linear')
相关文章：