Question

我有以下代码，当我想将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/

Answer 1

这在jQuery中本身就是一个“bug”。不是真正的错误，而是人们可能期待的功能。这不起作用的原因是因为你从一个固定的高度开始，并尝试将该高度转换为一个百分比，CSS无法真正做到这一点。如果您尝试使用常规CSS转换执行此操作，则它也无法正常工作。我不知道为什么，但这就是它的原因。

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

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

当然，根据您的应用程序，它可能比这更复杂，但这至少是为什么它不起作用以及如何解决它。

好的，我发现你的演示中没有容器。在这种情况下，为什么不使用animate？

，而不是使用.slideDown()

使用％时JQuery动画不起作用

1 个答案: