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 回答