javascript - jquery 向下滑动效果 - 不移动内部内容

Question

我正在尝试实现类似于 www.bbc.co.uk 上的“更多”链接的简单向上/向下滑动效果

你可以看到里面的内容并没有上下移动，而是像一个屏幕被拉到它们上面。

使用 jquery slideUp slideDown 无法实现这一点，而是整个 div 上下移动，因此文本看起来像是在移动。

如何使用 jquery 实现类似的效果？

Answer 1

只需将滑动 div 放在菜单和内容之间:

<div id="menu">Menu example. Click <a href="#" onclick="$('#slide').slideDown();">here!</a></div>
<div id="slide">Whoa! sliding div<br>See how it moves the content down</div>
<div>Content here</div>

参见 fiddle :http://jsfiddle.net/2hZme/1/