1

我有以下代码，当我想将 div 标签高度更改为 100% 时，动画似乎不起作用。但是，如果我将其设置为像素，那么动画就会起作用。

任何帮助，将不胜感激。

HTML / CSS

    <br />
<div id="biotext" style="width: 400px; height:50px; border: 1px solid #FF0000; background-color: #FF0000; overflow:hidden;">
    Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024 Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024 Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024 Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024  Hello Testing 123 456 789 1024
</div>


    <p><a href="#" id="seemoreb">Click</a></p>

Javascript

$(document).ready(function() {
    $("#seemoreb").click(function() {
        $("#biotext").animate({
            height: '100%'
        }, 1000);
    });

});​

http://jsfiddle.net/4MTyW/

4

1 回答 1

2

这本身就是 jQuery 中的一个“错误”。不是真正的错误，而是人们可能期望的不存在的功能。这不起作用的原因是因为您从固定高度开始并试图将该高度转换为百分比，这是 CSS 无法真正做到的。如果你试图用常规的 CSS 过渡来做到这一点，它也不会起作用。我不知道为什么，但就是这样。

但是，有一种解决方法。您可以手动计算您尝试扩展的容器的高度，然后将该数字放入动画中。这不是太难：

var containerHeight = $('.mycontainer').height();
$("#seemoreb").click(function() {
    $("#biotext").animate({
        height: containerHeight
    }, 1000);
});

当然，根据您的应用程序，它可能比这更复杂，但这至少是它不起作用的原因以及如何绕过它。

好的，我看到您的演示中没有容器。在这种情况下，animate为什么不使用，而不是使用.slideDown()？

于 2012-05-26T17:33:24.517 回答