2

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

<div>
    blahblahblahblah

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

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

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

非常感谢。

4

3 回答 3

6

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

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

于 2010-10-07T22:46:36.913 回答
1

您需要包装始终显示在向左浮动的 span 或 div 中的文本，让“附加”文本也向左浮动，并让您的 link 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-07T22:50:25.503 回答
0

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