Question

我一直在尝试将slideDown（）效果用于我正在处理的网站，但是我很难获得我想要的效果。这是一个示例，展示了我想要完成的任务。

<div>
    blahblahblahblah

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

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

基本上，当点击“更多...”时，我希望当前隐藏的文本使用滑动效果显示，同时保持与可见文本的结尾内联。这似乎不可能使用slideDown（），因为它正在将显示更改为阻止。

非常感谢。

Answer 1

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

fadeIn确实有用，可能是一种有用的选择。

Answer 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/

Answer 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>

替代jQuery的slideDown（）和slideUp（）不会影响显示属性

3 个答案: