3

我正在尝试将 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");
    });
});
4

3 回答 3

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");
    });
});
于 2012-07-16T12:58:57.860 回答
1

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

div 的高度是 100%……什么？ 答：父元素高度的100%。好，很好！父元素有多高？让我们检查其中包含的元素的高度。嗯，这个子 div 的高度设置为 100%……什么？

于是循环继续……

对此有两个修复：

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

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

于 2012-07-16T14:17:03.637 回答
0

设置具有定义高度的外部 div 的想法对我来说不是一个可能的解决方案。我的 php 代码是一个模板，我的 div 的内容总是在变化 - 使用数据库中的内容归档，这取决于用户单击的链接。这个 div 位于页面顶部，其他信息必须显示在它的正下方。

所以，我想出了这个非常适合我的解决方案。

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

然后我使用 JavaScript（在本例中为 jQuery）来获取高度。接下来，同样使用 jQuery，我将显示设置为阻塞，并将高度设置为我需要的“关闭”设置。最后，我在 .animation 中使用获得的高度来滑动 div“打开”。

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 行文本）。

于 2015-09-16T15:00:50.097 回答