jquery - 将 div 动画至 100% 高度

Question

我试图将 div 动画化为其内容的 100%，但它只是闪烁，而不是为 div 动画化，背景在动画结束时消失。我很困惑，因为当我输入高度数字而不是百分比时它会起作用。

$("#artbutton").click(function(event){
    event.preventDefault();
    var $self=$(this);
    $("#media").animate({height:0},"slow");
    $("#music").animate({height:0},"slow",function(){
        document.location = $self.attr('href');
        $("#art").animate({height:"100%"},"slow");
    });
});

Answer 1

通常，在涉及高度时，您希望避免使用百分比。问题如下:

div 的高度是 100%...什么？答案:父元素高度的100%。太好了!父元素有多高？让我们检查一下其中包含的元素的高度是多少。嗯，这个子 div 的高度设置为 100%...什么？

所以循环继续...

对此有两个修复:

1. 确保父元素具有固定的高度(不是百分比，因为这样它会检查上面的父元素，等等...)。因此，仅当父标记具有固定高度时，您才可以使用高度百分比。
2. 不要使用百分比，只给你的 div 一个固定的高度。

或者，相反，您可以将您的 div 包装在一个新的 div 中。将父级设置为固定高度，子级(旧 div)现在可以使用基于百分比的高度值。