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

我试图在下面的代码中将高度设置为“自动”，以使DIV根据内容调整其大小。不幸的是，这不起作用。 （如果我将高度设置为px，则没有问题）。知道为什么以及如何解决这个问题吗？非常感谢

Fiddle HERE。

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 height的animate()

演示-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')