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

Show p element only when entire text can fit

本文关键字：显示 元素 文本      更新时间：2023-09-26

在对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元素。

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

你应该试一试：

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

如果我

理解正确，你必须改变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 */
}
相关文章：