jQuery: 滑入 slideDown 和滑出 slideUp

目录

• • 1. 滑入 slideDown
  • 2. 滑出 slideUp
  • 3. 切换滑入滑出 slideToggle

1. 滑入 slideDown

---

jQuery 对象的 slideDown 方法可以为对象实现一个向下滑入的动画效果。

第一个参数是滑入动画的时长，可以为具体的毫秒数，也可以为代表时长的单词（字符串）。

fast 相当于 200 毫秒、normal 相当于 400 毫秒、slow 相当于 600 毫秒。

当 slideDown 方法没有参数，或者第一个参数为无法识别的字符串时，将被作为 normal 处理。

第二个参数是滑入动画结束后的回调函数。

滑入后，该对象被添加 display: block 样式

<style>
    #jack {
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
        display: none;
    }
</style>

<div id="jack"></div>
<script>
    $("#jack").slideDown(5000, function () {
        console.log("滑入动画结束");
    });
</script>

2. 滑出 slideUp

---

jQuery 对象的 slideUp 方法可以为对象实现一个向上滑出的动画效果。

第一个参数是滑出动画的时长，可以为具体的毫秒数，也可以为代表时长的单词（字符串）。

fast 相当于 200 毫秒、normal 相当于 400 毫秒、slow 相当于 600 毫秒。

当 slideUp 方法没有参数，或者第一个参数为无法识别的字符串时，将被作为 normal 处理。

第二个参数是滑出动画结束后的回调函数。

滑出后，该对象被添加 display: none 样式

<style>
    #jack {
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
        display: none;
    }
</style>

<div id="jack"></div>
<script>
    $("#jack").slideUp(5000, function () {
        console.log("滑出动画结束");
    });
</script>

3. 切换滑入滑出 slideToggle

---

jQuery 对象的 slideToggle 方法可以将隐藏的对象滑入显示，将显示的对象滑出隐藏。

slideToggle 方法的参数及使用与 slideDown 和 slideUp 相同。

<style>
    #jack {
        width: 100px;
        height: 100px;
        background-color: #4d90fe;
        display: none;
    }

    #jethro {
        width: 100px;
        height: 100px;
        background-color: #ffc700;
    }
</style>

<div id="jack"></div>
<div id="jethro"></div>
<script>
    $("#jack").slideToggle(2000, function () {
        console.log("动画执行完毕");
    });
    $("#jethro").slideToggle(2000, function () {
        console.log("动画执行完毕");
    });
</script>

标签：jQuery,动画,slideUp,slideToggle,100px,毫秒,滑入,slideDown
来源： https://blog.csdn.net/weixin_46618182/article/details/110456884