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

不确定你是否可以使用百分比，如果高度不固定，为什么不首先使用JS获取高度值。

$height = $('div').height();

然后使用数字为高度设置动画。

$("#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: $height + 'px',},"slow");
    });
});

Answer 2

通常，您希望在高度方面避免使用百分比。问题如下：

div的高度是100％......是什么？ 答案：父元素高度的100％。太好了！父元素有多高？让我们来看看其中包含的元素的高度。嗯，这个孩子div的高度设置为100％......是什么？

所以循环继续......

有两个修复方法：

确保父元素具有固定的高度（不是百分比，因为它会检查上面的父元素等等）。因此，只有在父标记具有固定高度时才能使用高度百分比。
不要使用百分比，只需给你的div一个固定的高度。

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

Answer 3

设置一个具有确定高度的外部div的想法对我来说不是一个可能的解决方案。我的PHP代码是一个模板，我的div的内容总是会改变 - 用数据库中依赖于用户点击链接的内容提交。此div位于页面顶部，其他信息必须显示在其下方。

所以，我提出了这个对我很有效的解决方案。

首先，我从CSS中删除了设置高度并添加了“display：none;” - 这允许div加载完全打开，但用户没有看到它。

然后我使用JavaScript（在这种情况下为jQuery）来获得高度。接下来，使用jQuery，我将显示设置为阻止，并将高度设置为我需要的“关闭”设置。最后，我在我的.animation中使用获得的高度来滑动div'open。'

CSS代码：

#main_description {
position: relative;
display: none;
/*height: 8.92855em; -> this was the original 'closed' height*/ 
border-bottom: 1px solid #a9a5a6;
overflow: hidden;
}

JavaScript：

var state = true;
var descriptionHeight = $("#main_description").height();
// for testing -> alert("Description Height: " + descriptionHeight);

$("#main_description").css({"display" : "block", "height" : "8.92855em"});

$("#main_description_toggle").click(function()
{
    if (state)
    {
        $("#main_description").animate({
        height: descriptionHeight + "px"
        }, 1000);

        $("#main_description_toggle").html("<a>less &#9650;</a>");
    }
    else
    {
        $("#main_description").animate({
        height: "8.92855em"
        }, 1000);

        $("#main_description_toggle").html("<a>more &#9660;</a>");
    }
    state = !state;
});

（我知道，8.92855em的高度看起来很奇怪，但这是行高的5倍，客户想要在div'关闭'时显示5行文字。）

将div设置为100％高度的动画

3 个答案: