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

我试图实现一种简单的上下滑动效果，类似于www.bbc.co.uk上的“更多”链接

您可以看到，内部内容不会上下移动，而是像一个屏幕被拉过一样

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

---

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

slideUp/slideDown

在设置动画时使用顶部位置，如果您想使用高度。因此，我建议手动设置动画：

// Initial variables
var panel = $('#panel');
var panelHeight = panel.height();

// Set the height to 0
panel.height('0px');

// Animate it to its initial size
$('a').click(function() {
    $('#panel').animate({'height' : panelHeight});
});

。。。当然还有CSS：

#panel {
    overflow: hidden;
    height: 300px; /* or whatever */
}

---

小提琴：

只需将滑动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>

菜单示例。点击
哇！滑动div
查看它如何向下移动内容
满足于此

---

请参阅fiddle:

这不是jquery的问题，这是HTML布局和CSS样式的问题。这取决于布局的设置方式。还有你的发型。你可以用一个小提琴来覆盖这个区域，然后把这个小提琴向下滑动，以显示下面是什么。这两个答案对你有帮助吗？在小提琴上练习。。。一秒钟