僅當整個文本可以適合時才顯示p元素

當爲div高度設置動畫時，我需要將元素堆疊起來，而不是逐漸顯示。僅當整個文本可以適合時才顯示p元素

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

這很難解釋，所以有什麼問題請問。

來源

2013-01-23 CharliePrynn

jsfiddle鏈接它指向他們的主頁 –

道歉。請在問題中找到修改的鏈接。 – CharliePrynn

也許這就是你要找的東西：[http://blog.steamshift.com/blog/2012/01/04/animation-blocks-with-jquery-deferred-and-pipe/](http://blog .steamshift.com/blog/2012/01/04/animation-blocks-with-jquery-deferred-and-pipe /） – Morpheus

，你應該試試這個：

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); 
       } 
      } 
     } 
    }); 
});

demo

編輯未定義$測試次要代碼更新，將更新的jsfiddle但網站似乎對我沒有反應:(

來源

2013-01-23 15:16:16

你想垃圾我的控制檯嗎？ :)'$ test is undefined' – Morpheus

@Morpheus是的..那是我的計劃，我已經更新了不同結果的代碼 –

如果我理解正確，你必須改變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-23 14:54:10 Zosimas

僅當整個文本可以適合時才顯示p元素

回答

相關問題