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

【问题标题】：jquery slide down effect - without moving inner contentsjquery向下滑动效果 - 不移动内部内容
【发布时间】：2013-04-29 08:25:37
【问题描述】：

我正在尝试实现类似于 www.bbc.co.uk 上的“更多”链接的简单上/下滑动效果

你可以看到里面的内容并没有上下移动，而是像一个屏幕被拉过一样。

使用 jquery slideUp slideDown 并没有实现这一点，而是整个 div 上下移动，因此文本看起来像在移动。

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

【问题讨论】：

这不是jquery的问题，是HTML布局和CSS样式的问题
是的，这取决于您的布局设置方式。还有你有什么样的造型。您可以使用覆盖相关区域的 div，然后将 div 向下滑动以显示下面的内容。
这两个答案对您有帮助吗？

标签： javascript jquery

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：

小提琴...一秒钟