1

divの高さをアニメーション化するときは、要素を徐々に表示するのではなく、積み重ねる必要があります。

これが私が持っているものです：http：//jsfiddle.net/WzC3g/

<div class="introTextCont">
  <h2>Test</h2>
    <p class="introPara">Test 1</p>
    <p class="introPara">Test 2</p>
    <p class="introPara">Test 3</p>
</div>

高さが高くなると、テキストの上半分が表示されます。発生する必要があるのは、高さが増加するにつれて、完全なp要素が表示されることです。

説明が難しいので、ご不明な点がございましたらお問い合わせください。

4

2 に答える 2

1

これを試してみてください：

jQuery(document).ready(function(){
    var $items = jQuery(".introPara").css("visibility", "hidden");
    var $outer = jQuery('.introTextCont')
    $outer.animate({height: 100}, {
        duration: 2000,
        step: function(){
            if($items.length){
                var $test = $items.first();
                if($outer.height() > $test.offset().top + $test.outerHeight()){
                    $test.css("visibility", "");
                    $items = $items.slice(1);
                }
            }
        }
    });
});

デモ

未定義の$testのマイナーコード更新を編集すると、jsFiddleが更新されますが、サイトが応答しないようです:(

于 2013-01-23T15:16:16.897 に答える
0

私が正しく理解していれば、divを変換する必要があり、高さを変更しないでください。これを行うには、cssファイルで'transform：scaleY（value）'プロパティを使用する必要があります。

例えば：

div
{
transform: scaleY(2);
-ms-transform: scaleY(2); /* IE 9 */
-webkit-transform: scaleY(2); /* Safari and Chrome */
-o-transform: scaleY(2); /* Opera */
-moz-transform: scaleY(2); /* Firefox */
}
于 2013-01-23T14:54:10.463 に答える