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/