动画 jQuery 高度百分比

Posted 2023-05-08

【中文标题】动画 jQuery 高度百分比

【英文标题】：Animate jQuery height percentage

【发布时间】：2012-08-01 07:12:28

【问题描述】：

当我尝试为百分比设置动画时，它不是动画，而是立即扩展到整个高度。我希望它扩展到 100%，但很顺利

CSS：

#block-views
overflow:hidden;
height:20px;

html：

<div id="block-views">
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    7<br/>
    8<br/>
    9<br/>
    10<br/>
</div>
<a href="#" class="loadmore">Load more</a>

jQuery 代码：

$(function() 
    $( ".loadmore" ).toggle(
        function() 
            $( "#block-views" ).animate(
                height: "20px",
            , 1000 );
        ,
        function() 
            $( "#block-views" ).animate(
                height: "100%",
            , 1000 );
        

    );
);

当我点击加载更多时，它会立即扩大到 100%，不平滑，但是当我第二次点击它时，它会平滑地减小到 20 像素。我尝试在 Chrome 的检查器工具中观看扩展过程，我可以清楚地看到百分比添加顺利，但数字不是整数，Chrome 似乎无法识别它。我该如何解决这个问题？

【问题讨论】：

尝试将height: "100%" 更改为height: $(this).parent().height()。 jQuery 很难比较百分比和像素，所以你应该以像素为单位进行计算。

【参考方案1】：

我认为 CSS 百分比值在父节点上。

所以如果你想让这成为可能，你想添加 div 父节点并设置父节点的高度，我在 jsFiddle 中举了一个例子

【讨论】：

啊啊啊。不适用于 jQuery v1.11。应用切换的方式不同

【参考方案2】：

我会建议 JQuery 论坛上的这篇文章适合您的要求。

http://forum.jquery.com/topic/jquery-animate-with-a-percentage-placed-div

【参考方案3】：

我很确定这是不合法的。您不能混合使用 px 和 percent - 它无法在它们之间进行转换。

【讨论】：

谢谢cpt。明显的。我很确定 SA 是问答 - 我错过了答案。

【参考方案4】：

我想到了两种方法。

第一种方式是你的方式，我在这里发现一个逗号, 错误：并且需要使用position:aboslute; css 属性。最后一件事改变你的主要响应功能的顺序。

Here is working jsFiddle.

$(function() 
    $( ".loadmore" ).toggle(
        function() 
            $( "#block-views" ).stop().animate(
                height: "20px"//if you wont use another animate property; dont use comma here
            , 1000 );
        ,
        function() 
            $( "#block-views" ).stop().animate(
                height: "100%"
            , 1000 );
        

    );
);​

结构是这样的 = .animate(properties [, duration] [, easing] [, complete] )

多个动画函数应该是这样的：.animate('height':'20px','width':'20px',1000);

----------------------------------------------- -------------

第二种方式是我的方式，每次点击可以增加+20px的高度：

Here is jsFiddle

$(function() 
    $( ".loadmore" ).click(function() 
        $("#block-views").animate('height':'+=20px',1000);
    );
);​

【参考方案5】：

我已经找到了解决这个问题的方法（抱歉迟到了）。您需要做的是在 #block-views 元素内制作额外的包装器，该包装器将包含实际的高度信息：

<div id="block-views"> //height is 20px now
 <div class="wrapper"> //has its full height in px
  1<br/>
  2<br/>
  3<br/>
  4<br/>
  5<br/>
  6<br/>
  7<br/>
  8<br/>
  9<br/>
  10<br/>
 </div>
</div>

现在在 javascript 中，您可以将 .wrapper 高度传递给 animate() 函数：

$('#block-news').stop().animate('height': $('#block-news .wrapper').height(), 1000);

为我工作。对于切换，您可以添加新变量并在那里存储初始高度（20px）。