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 に答える