下载掌阅APP，畅读海量书库
立即打开
1.5 页面的滑动隐藏
越来越多的人习惯用手机浏览页面，而手机上可以显示的内容很少，如果我们要做响应式页面，就要考虑用户体验，不能堆积内容。在很多移动网页上，用户会发现页面初始时只有标题栏，标题栏上除了窗口名称，还会提供类似“展开窗口”或“收起窗口”的功能按钮。与页面“显示”和“隐藏”效果不同的是，单击功能按钮时，窗口是慢慢向下或向上以滑动的方式展现给用户的，如图1.4和图1.5所示。
图1.4 窗口“滑动”关闭状态
图1.5 窗口“滑动”打开状态
本例主要代码如下：
第04~07行中的“滑动隐藏”效果通过slideUp()函数实现，该函数使用滑动效果隐藏被选择元素，前提是该元素已处于显示状态。第08~11行中的“滑动显示”效果通过slideDown()函数实现，它使用滑动效果显示隐藏着的被选择元素。