javascript - 修改子项高度时如何自动设置父项高度的动画

Question

我有一个父 div，高度设置为 auto。

现在，每当我在那个 div 的子项中淡化某些东西时，高度就会跳到新的高度。我希望这是一个平稳的过渡。

高度应该在之前任何子元素被显示，并且在之后任何子元素被移除(display: none;).

我知道当您知道预定义的高度时这是可能的，但我不知道如何将高度设置为 auto 来实现这一点。

JSFiddle Demo

Answer 1

您可以使用 display: none 和 slideDown() 加载新内容，然后使用动画不透明度淡入。在你删除它之前，你只是淡出 slideUp()

我认为这就是您想要的:jsFiddle

$(function() {
    $("#foo").click(function() {
        if($("#bar").is(":visible")) {
            $("#bar").animate({"opacity": 0}, function() {
                $(this).slideUp();
            });
        }
        else {
            $("#bar").css({
                "display": "none",
                "opacity": 0,
                /* The next two rows are just to get differing content */
                "height": 200 * Math.random() + 50,
                "background": "rgb(" + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + ")"
            });
            $("#bar").slideDown(function() {
                $(this).animate({"opacity": 1});
            });
        }
    });
});

也试试这个:jsFiddle .单击“单击我”以添加新的 div。单击一个新的 div 将其删除。

$(function() {
    $("#foo").click(function() {
        var newCont = $("<div>").css({
            "display": "none",
            "opacity": 0,
            "height": 200 * Math.random(),
            "background": "rgb(" + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + "," + Math.round(255 * Math.random()) + ")"
        });
        $(this).append(newCont);
        newCont.slideDown(function() {
            $(this).animate({"opacity": 1});
        });
        newCont.click(function(e) {
            $(this).animate({"opacity": 0}, function() {
                $(this).slideUp(function() {
                    $(this).remove();
                });
            });
            return false;
        });
    });
});