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> 

См скрипка: 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 */ 
} 

Fiddle: http://jsfiddle.net/3fsQr/