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>

见小提琴：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/