替代 jQuery 的 slideDown() 和 slideUp() 不影响显示属性答案

【问题标题】：Alternative to jQuery's slideDown() and slideUp() not affecting the display property替代 jQuery 的 slideDown() 和 slideUp() 不影响显示属性
【发布时间】：2010-10-07 22:27:24
【问题描述】：

我一直在尝试为我正在开发的网站使用 slideDown() 效果，但我很难获得我想要的效果。这是一个显示我想要完成的示例。

<div>
    blahblahblahblah

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

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

基本上，当单击“更多...”时，我希望当前隐藏的文本使用滑动效果出现，同时与可见文本的末尾保持一致。 slideDown() 似乎无法做到这一点，因为它将显示更改为阻止。

非常感谢。

【问题讨论】：

标签： javascript jquery slideup slidedown

【解决方案1】：

不幸的是，这基本上是不可能的。 jQuery 的动画依赖于具有高度和宽度的元素。内联元素没有设置或可设置这些尺寸，因此动画（无论是使用animate 还是slideUp）必须使它们成为块级元素。

fadeIn 确实有效，并且可能是一个有用的替代方案。

【讨论】：

但大概你可以通过将inline 元素显示为inline-block 来实现这一点（这甚至应该适用于IE6，具有有效的文档类型）？
@David 我无法完成这项工作，即使在 FF3.6 中！我不认为 jQuery 喜欢动画 inline-block...
基本的inline 部分很可能有问题，我在做出假设之前没有尝试，只是我认为jQuery 需要width和height 可以满足display: inline-block 就是全部。啊，我任性的天真... =)
作为一种解决方法，是否可以在元素内的预定义高度值处开始动画？这可以让我用整个文本替换文本 sn-p，然后在正确的位置（sn-p 结束的地方）开始动画。

【解决方案2】：

您需要将始终显示在向左浮动的 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/

【讨论】：

感谢您的回答。这似乎是一个很好的解决方案，但它不适用于较长的文本。

【解决方案3】：

我以前也遇到过这个问题。那时似乎不可能改变 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>

【讨论】：