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

发布于 09-26 10:24 字数 430 浏览 8 评论 0原文

我一直在尝试对我正在开发的网站使用 SlideDown() 效果,但我很难获得我想要的效果。这是一个示例,显示了我想要完成的任务。

<div>
    blahblahblahblah

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

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

基本上,当单击“更多...”时,我希望当前隐藏的文本使用滑动效果显示,同时与可见文本的末尾保持内联。这对于 SlideDown() 来说似乎不可能,因为它正在将显示更改为阻止。

非常感谢。

I've been trying to use the slideDown() effect for a website I'm working on, but I'm having difficulty getting the effect I want. Here's a sample showing what I want to accomplish.

<div>
    blahblahblahblah

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

    <a class="link_more" id="more">More…</a></div>
</div>

Basically, when "More..." is clicked, I want the text that's currently hidden to appear using a sliding effect while staying inline with the end of the visible text. This doesn't seem possible with slideDown() because it is changing display to block.

Thank you very much.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

誰認得朕2024-10-03 10:24:04

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

这是一个演示,展示了它的实际效果: http://jsfiddle.net/7yqMr/

You'll need to wrap your text that always shows in a span or div that floats left, have the "additional" text float left as well, and have your link clear: both;, but this structure will make a simple .slideDown() work:

<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…</a></div>
</div>

Here's a demo showing this in action: http://jsfiddle.net/7yqMr/

空城旧梦2024-10-03 10:24:04

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

I've had that problem before. At that time it seemed not possible to change the jQuery behaviour, and I ran into problems while writing a routine that would do the same with inline blocks. So, I switched to just using display: block elements with float: left to keep them in one line.

<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…</a></div>
</div>
So尛奶瓶2024-10-03 10:24:03

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

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

Unfortunately, this is essentially impossible. jQuery's animation relies upon the element having height and width. Inline elements do not have these dimensions set or settable, so animations (whether using animate or slideUp) must make them block-level elements.

fadeIn does work, and may be a useful alternative.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文