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

标签 javascript jquery

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

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

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

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

最佳答案

只需将滑动 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>

参见 fiddle :http://jsfiddle.net/2hZme/1/

关于javascript - jquery 向下滑动效果 - 不移动内部内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16274171/

相关文章:

javascript - 如何制作 2 列投资组合页面,左边是导航,右边是当图像悬停在左侧导航词上时显示的图像

javascript - 将选定的行传输到另一个表

javascript - 如何在 Ext JS 3.4 网格中滚动到底部?

javascript - 如何更改 Highcharts 中每个气泡的背景颜色?

javascript - 在 select2 上禁用 ajax 缓存的正确方法是什么?

javascript - 是否可以将匿名函数附加到两个不同的元素/事件?

javascript - 是否可以从 Firefox 运行 bash 脚本? (使用 Firefox 附加 SDK)

javascript - 只有 10 个可见链接的下拉菜单

jquery - Mobile Safari $(window).height() URL 栏差异

javascript - 为什么当鼠标离开区域时元素没有消失?