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/

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

2 个答案: