jQuery实现滑动效果详解（slideDown、slideUp和slideToggle）

jQuery 实现滑动效果，可以借助以下 3 个方法：

slideDown() 方法：用于滑动显示匹配的元素）；
slideUp() 方法：用于滑动隐藏匹配的元素；
slideToggle() 方法：用于通过元素高度的变化动态切换元素的可见状态。

jQuery滑动显示匹配的元素

使用 slideDown() 方法可以向下增加元素高度，动态显示匹配的元素。slideDown() 方法会逐渐向下增加匹配的隐藏元素的高度，直到元素完全显示为止。

slideDown() 方法的语法格式如下：

slideDown(speed, [callback])

speed：用于指定动画的时长。该参数可以是数字，也就是指元素在多少毫秒后完全显示；也可以是默认参数 slow、normal 和 fast。
callback：可选参数，用于指定显示完成后要触发的回调函数。

例如，要在 300 ms 内滑动显示页面中 id 属性值为 ad 的元素，可以使用下面的代码：

$("#ad").slideDown(300);

【实例】滑动显示 id 属性值为 ad 的 <div> 元素。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库：

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面中创建两个 <div> 元素，其中 id 属性值为 ad 的 <div> 元素是外层 <div> 元素的子元素，并且元素内容是隐藏的。具体代码如下：

<div>
    <div id="ad" style="display:none;">
        C语言中文网
    </div>
    jQuery基础教程
</div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现滑动显示效果。具体代码如下：

<script type="text/javascript">
$(document).ready(function () {
    $("#ad").slideDown(600);
});
</script>

运行效果如下图所示：

图 1 滑动显示效果

jQuery滑动隐藏匹配的元素

使用 slideUp() 方法可以向上减少元素高度，动态隐藏匹配的元素。slideUp() 方法会逐渐向上减少匹配的显示元素的高度，直到元素完全隐藏为止。

slideUp() 方法的语法格式如下：

slideUp(speed, [callback])

speed：用于指定动画的时长。该参数可以是数字，也就是指元素在多少毫秒后完全隐藏；也可以是默认参数 slow、normal 和 fast。
callback：可选参数，用于指定隐藏完成后要触发的回调函数。

【实例】滑动隐藏 id 属性值为 ad 的 <div> 元素。
在引入 jQuery 库的代码下方编写 jQuery 代码，实现滑动隐藏效果。具体代码如下：

<script type="text/javascript">
$(document).ready(function () {
    $("#ad").slideUp(600);
});
</script>

运行效果如下图所示：

图 2 滑动隐藏效果

jQuery动态切换元素的可见状态

通过 slideToggle() 方法可以实现通过元素高度的变化动态切换元素的可见状态。在使用 slideToggle() 方法时，如果元素为显示状态，就减少元素高度使全部元素隐藏；如果元素为隐藏状态，就增加元素高度使元素最终全部显示。

slideToggle() 方法的语法格式如下：

slideToggle(speed, [callback])

speed：用于指定动画的时长。该参数可以是数字，也就是指元素在多少毫秒后完全显示或隐藏；也可以是默认参数 slow、normal 和 fast。
callback：可选参数，用于指定动画完成后要触发的回调函数。

例如，要实现单击 id 属性值为 flag 的图片时，控制菜单的显示或隐藏（默认隐藏菜单，奇数次单击时显示菜单，偶数次单击时隐藏菜单），可以使用下面的代码：

$("#flag").click(function () {
    $("#menu").slideToggle(300);   // 显示或隐藏菜单
});

实战：伸缩式导航菜单

下面我们通过一个具体的实例介绍使用 jQuery 实现滑动动画效果的具体应用。

【实例】伸缩式导航菜单。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，首先添加一个 <div> 标记，用于显示导航菜单的标题；然后添加一个字典列表，用于添加主菜单项及其子菜单项，其中主菜单项由 <dt> 标记定义，子菜单项由 <dd> 标记定义；最后再添加一个 <div> 标记，用于显示导航菜单的结尾。关键代码如下：

<div id="top"></div>
<dl>
    <dt>员工管理</dt>
    <dd>
        <div class="item">添加员工信息</div>
        <div class="item">管理员工信息</div>
    </dd>

    <dt>招聘管理</dt>
    <dd>
        <div class="item">浏览应聘信息</div>
        <div class="item">添加应聘信息</div>
        <div class="item">浏览人才库</div>
    </dd>

    <dt>薪酬管理</dt>
    <dd>
        <div class="item">薪酬登记</div>
        <div class="item">薪酬调整</div>
        <div class="item">薪酬查询</div>
    </dd>

    <dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>

3) 编写 CSS 样式，用于控制导航菜单的显示样式。

4) 在引入 jQuery 库的代码下方编写 jQuery 代码，首先隐藏全部子菜单，然后为每个包含子菜单的主菜单项添加 click 事件，当主菜单为隐藏状态时，滑动显示主菜单，否则滑动隐藏主菜单。具体代码如下：

<script type="text/javascript">
$(document).ready(function () {
    $("dd").hide();   // 隐藏全部子菜单
    $("dt[class!='title']").click(function () {
        if ($(this).next().is(":hidden")) {
            // slideDown()：通过高度变化（向下增长）动态地显示所有匹配的元素
            $(this).css("backgroundImage", "url(images/title_hide.gif)");
            // 改变主菜单的背景
            $(this).next().slideDown("slow");
        } else {
            $(this).css("backgroundImage", "url(images/title_show.gif)");
            // 改变主菜单的背景
            $(this).next().slideUp("slow");
        }
    });
});
</script>

运行程序，显示下图所示的效果：

图 3 未展开任何主菜单的效果

单击某个主菜单项时，将展开该主菜单的子菜单，例如单击“招聘管理”主菜单项，将显示下图所示的子菜单。

图 4 展开“招聘管理”主菜单的效果

通常情况下，“退出系统”主菜单没有子菜单，所以单击“退出系统”主菜单将不展开对应的子菜单，而是激活一个超链接。

jQuery实现滑动效果详解（slideDown、slideUp和slideToggle）

jQuery滑动显示匹配的元素

jQuery滑动隐藏匹配的元素

jQuery动态切换元素的可见状态

实战：伸缩式导航菜单

相关文章