Question

我的父级div的身高设置为auto。

现在每当我褪去那个div的孩子时，高度就会跳到新的高度。我希望这是一个平稳的过渡。

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

我知道当你知道预定义的高度时这是可能的，但我不知道如何在高度设置为auto的情况下实现这一点。

Answer 1

我采取的方法是查看.bar是否可见，如果是这样，则将#foo的高度设置为回到它开始的位置，或将其设置为{的高度。 {1}} + .bar否则，在两种情况下都使用回调来获得您正在寻找的效果。

代码：

#foo

Fiddle.

修改

添加$(function() { var start_height = $('#foo').outerHeight(); $("#foo").click(function() { $bar = $('.bar'); $foo = $(this); if($bar.is(':visible')) { $bar.fadeToggle('slow', function() { $foo.animate({height: start_height}); }); } else { $foo.animate({height: ($bar.outerHeight()+start_height)+'px'}, 'slow', function() { $bar.fadeToggle(); }); } }); });以防止双击时出现意外行为。

Updated Fiddle.

Answer 2

您可以使用display: none和slideDown()加载新内容，然后使用动画不透明度加载fadeIn。在删除它之前，您只需淡出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;
        });
    });
});

Answer 3

尝试在浏览器中使用开发人员工具。

现在所有浏览器都有。（ctrl shift i）

如果你在执行fadeOut后查看页面源代码，你会看到内部元素的内联样式“display：none”。这意味着你的内部元素不再具有高度，这就是外（父）元素崩溃的原因（height = 0）;

这是所有浏览器的一项功能，即块元素需要高度，除非你不会覆盖它。因此，由于高度不超过0像素的内部没有元素，因此父母的高度将为0px;

y可以使用css样式覆盖它

height: 300px  
or
min-height: 300px;

如果您使用jquery

，这是正确的

Answer 4

尝试此修复：）

 $(function() {
    var height =  $("#foo").height();
    $("#foo").click(function() {  
     var dis =   $(".bar").css('display');

     if(dis == 'none'){
      $(this).animate({height:height+$(".bar").height()},2000,function(){
      $(".bar").show();
       });
     } 
      else{
        $(".bar").hide();
        $(this).animate({height:height-$(".bar").height()},2000);
       }

    });
});

#foo {
    height: auto;
    background: #333;
    color: white;
    min-height: 20px;
}

如何在修改子高度时为父高度自动设置动画

4 个答案: