修改孩子身高后如何为父母身高自动设置动画

Kid Diamond 发表于 Dev

小子钻石

我有一个div身高定为的父母auto。

现在，每当我淡入淡入淡入的东西时div，其高度就会跳到新的高度。我希望这是一个平稳的过渡。

高度应该在显示任何子项之前过渡，并且也应在移除任何子项之后过渡（display: none;）。

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

JSFiddle演示

马蒂亚斯

您可以加载新的内容与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;
        });
    });
});