jQuery的向下滑动的效果 - 而无需移动内部内容

Question

我想实现类似于在www.bbc.co.uk的“更多”链接只需简单的滑动向上/向下作用

你可以看到内部的内容不要上下移动，而是像屏幕一样被拉过来。

使用jQuery的slideUp slideDown没有达到这个目的，而是整个div上下移动，所以文本看起来像它的移动。

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

Answer 1

只要把菜单和之间的滑动格content：

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

看到提琴：http://jsfiddle.net/2hZme/1/

Answer 2

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 */ 
} 

小提琴：http://jsfiddle.net/3fsQr/