制作jQuery高度百分比动画

Animate jQuery height percentage

本文关键字：动画 百分比 高度 jQuery 制作      更新时间：2023-09-26

当我尝试设置百分比动画时，它不是设置动画，而是立即扩展到整个高度。我希望它扩展到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似乎无法识别。我该如何解决这个问题？

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

因此，如果你想实现这一点，你需要添加div父节点，并设置父节点的高度，我在jsFiddle 中举了一个例子

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

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

我敢肯定这是不合法的。你不能把px和percent混合在一起——它没有办法在它们之间转换。

我想到了两种方法。

第一种方式是您的方式，我在这里发现了一个逗号,错误：，需要使用position:aboslute;Css属性。最后改变你的主要响应函数的顺序。

这是工作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（属性[，持续时间][，放松][，完成]）

多重动画功能应该是这样的：.animate({'height':'20px','width':'20px'},1000);

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

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

这是jsFiddle

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

我找到了这个问题的解决方案（很抱歉迟到了）。您需要做的是在#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中，您可以将.wapper高度传递给animate（）函数：

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

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

相关文章：