javascript - 仅当整个文本可以容纳时才显示 p 元素

Question

为 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 元素。

这很难解释，所以有任何问题请提出。

Answer 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，但该网站似乎对我没有响应 :(

Answer 2

如果我理解正确，你必须改变 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 */
}