替代jQuery的slideDown（）和slideUp（）不影響顯示屬性

我一直在嘗試對我正在使用的網站使用slideDown（）效果，但我很難得到我想要的效果。下面是一個示例，顯示我想要完成的任務。替代jQuery的slideDown（）和slideUp（）不影響顯示屬性

<div> 
    blahblahblahblah 

    <span id="span_more" style="display:none"> 
     blahblahblah 
    </span> 

    <a class="link_more" id="more">More&hellip;</a></div> 
</div>

基本上，當「更多...」被點擊時，我想，因此目前隱藏的使用滑動的效果，同時與可見文本的末尾留內嵌顯示的文本。這對於slideDown（）來說似乎不可行，因爲它將顯示更改爲阻止。

非常感謝。

來源

2010-10-07 Patrice Paquette

不幸的是，這實際上是不可能的。 jQuery的動畫依賴於具有高度和寬度的元素。內聯元素沒有設置或設置這些維度，因此動畫（無論是使用animate還是slideUp）都必須使它們成爲塊級元素。

fadeIn確實有效，可能是一個有用的選擇。

來源

2010-10-07 22:46:36 lonesomeday

但想必你可以通過顯示'inline'元素'直列block'實現這一目標（這甚至應該工作在IE6上，有效的文檔類型）？ – 2010-10-07 23:07:34

@David即使在FF3.6中，我也無法完成這項工作！我不認爲jQuery喜歡動畫'inline-block'... – lonesomeday 2010-10-07 23:13:55

它可能有基本的'inline'部分的問題，我沒有*嘗試*在做出我的推定之前，這只是我認爲jQuery的需要對於'width'和'height'可以通過'display：inline-block'完成。啊，我的故意naïveté... =） – 2010-10-07 23:16:58

我以前有過這個問題。那時候似乎不可能改變jQuery的行爲，而我在編寫一個可以和內聯塊一樣的例程時遇到了問題。所以，我轉而使用display: block元素與float: left保持在一行。

<div> 
    <div style="display: block; float: left;">blahblahblahblah</div> 

    <div id="span_more" style="display: none; float: left;"> 
     blahblahblah 
    </div> 

    <a style="display: block; float: left;" class="link_more" id="more">More&hellip;</a></div> 
</div>

來源

2010-10-07 22:46:57 thomaspaulb

你需要換你的文字總是顯示漂浮左SPAN或DIV，有「額外的」文本浮動離開爲好，有你的鏈接clear: both;，但這種結構將使簡單.slideDown（）工作：

<div> 
    <span style="float: left;">blahblahblahblah</span> 

    <span id="span_more" style="display: none; float: left;"> 
     blahblahblah 
    </span> 

<div style="clear: both;"><a class="link_more" id="more">More&hellip;</a></div> 
</div>

這裏顯示了動作中的一個演示：http://jsfiddle.net/7yqMr/

來源

2010-10-07 22:50:25 Ender

感謝您的回答。這似乎是一個很好的解決方案，但它不適用於較長的文本。 – 2010-10-08 01:12:48

替代jQuery的slideDown（）和slideUp（）不影響顯示屬性

回答

相關問題