jQuery常用API--效果

jQuery给我们封装了很多动画效果，最为常见的如下：

1. 显示隐藏效果

1.1 显示语法规范

show([speed , [easing] , [fn]])

1.2 显示参数

① 参数都可以省略，无动画直接显示
② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

1.3 隐藏语法规范

hide([speed , [easing] , [fn]])

1.4 隐藏参数

1.5 切换语法规范

toggle([speed , [easing] , [fn]])

1.6 切换参数

1.7 代码体验

<!-- 导入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <!-- HTML结构 -->
    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <button class="toggle">切换</button>
    <div></div>
    <!-- js代码 -->
    <script>
        $(function() {
            // 1. 点击显示按钮 div显示
            $(".show").click(function() {
                // $('div').show();  // 直接显示
                // $('div').show(1000) // 花费1000毫秒显示
                $('div').show('normal') // 可以使用slow，fast，normal字符串
            });
            // 2. 点击隐藏按钮 div隐藏
            $(".hide").click(function() {
                // $('div').hide();
                // $('div').hide(1000) // 花费1000毫秒隐藏
                $('div').hide('normal', function() {   // 可以使用slow，fast，normal字符串
                        alert("我溜啦~")
                    }); // 在执行完该隐藏效果后，调用该函数
            });
            // 3. 切换切换按钮 div显示/隐藏
            $(".toggle").click(function() {
                // $('div').toggle();
                // $('div').toggle(1000) // 花费1000毫秒进行切换动作
                $('div').toggle('normal') // 可以使用slow，fast，normal字符串
            });
        })
    </script>
</body>

注意：

① 使用jQuery 前，首先要使用<script>标签将 jquery 的js文件导入才可；

② 这里的显示和隐藏方法，我们使用的时候一般不加任何参数，直接显示和隐藏，相当于原生JS中 display：block/none；

2. 滑动效果

2.1 下滑效果语法规范

slideDown([speed , [easing] , [fn]])

2.2 下滑效果参数

① 参数都可以省略。
② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

2.3 上滑效果语法规范

slideUp([speed , [easing] , [fn]])

2.4 上滑效果参数

2.5 滑动切换效果语法规范

slideToggle([speed , [easing] , [fn]])

2.6 滑动切换效果参数

2.7 代码体验

<!-- 引入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    div {
        width: 140px;
        height: 338px;
        background-color: pink;
    }
</style>
<body>
    <!-- HTML结构 -->
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <!-- js 代码 -->
    <script>
        $(function() {
            // 滑动参数和显示隐藏一样
            $('button').eq(0).click(function('slow') {
                $('div').slideDown();  // 下滑动 slideDown
            })
            $('button').eq(1).click(function() {   // 上滑动 slideUp
                $('div').slideUp((function() {
                    alert("我是小仙女~");
                });  // 上滑动效果完成后，执行回调函数
            })
            $('button').eq(2).click(function() {
                $('div').slideToggle(500);  // 切换滑动 slideToggle
            })
        })
    </script>
</body>

注意：滑动效果的参数和显示隐藏一模一样，所以记住其一即可，该效果经常使用于鼠标经过离开出现二级菜单，这比直接显示和隐藏感觉更好。

3. 淡入淡出效果

3.1 淡入效果语法规范

fadeIn([speed , [easing] , [fn]])

3.2 淡入效果参数

3.3 淡出效果语法规范

fadeOut([speed , [easing] , [fn]])

3.4 淡出效果参数

3.5 淡入淡出切换效果语法规范

fadeToggle([speed , [easing] , [fn]])

3.6 淡入淡出切换效果参数

3.7 渐进方式调整到指定的不透明度效果语法规范

fadeTo([[speed] , opacity , [easing] , [fn]])

3.8 效果参数

① opacity 透明度必须写，取值0-1之间。
② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)，必须写。
③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

3.9 代码体验

<!-- 导入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    div {
        display: none;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <!-- HTML结构 -->
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <!-- js 代码 -->
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                $('div').fadeIn(1000); // 淡入效果  fadeIn()
            })
            $('button').eq(1).click(function() {
                $('div').fadeOut('fast'); // 淡出效果  fadeOut()
            })
            $('button').eq(2).click(function() { // 淡入淡出切换效果  fadeToggle()
                $('div').fadeToggle(function() {
                    alert("点下淡入，点下又淡出，两种效果来回切换")
                }); // 淡入淡出切换效果完成后执行回调函数
            })
            $('button').eq(3).click(function() {
                // 修改透明度 fadeTo()  这个速度和透明度必须写
                $('div').fadeTo(1000, 0.5);
            })
        })
    </script>
</body>

注意：除了修改透明度 fadeTo() 这个速度和透明度必须写，其余三种动画效果的参数和显示隐藏还有滑动效果的参数一致，并且都可省略。

4. 自定义动画 animate

4.1 语法

animate(params, [speed] , [easing] , [fn])

4.2 参数

① params: 想要更改的样式属性，以对象的形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法，如 backgroundColor。其余参数均可省略
② speed：三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)，必须写。
③ easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。
④ fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

4.3 代码体验

<!-- 导入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    div {
        position: absolute;
        left: 0;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<body>
    <!-- HTML结构 -->
    <button>动起来</button>
    <div></div>
    <!-- js 代码 -->
    <script>
        $(function() {
            $('button').click(function() {
                //  第一个参数必写，而且以对象形式传递
                $('div').animate({
                    left: 400,
                    top: 300,
                    opacity: 0.5
                }, 500, function() {
                    alert('说动就动')
                });
            })
        })
    </script>
</body>

注意：自定义动画的第一个参数要以对象的形式传入需要修改的样式属性，必写的

5. 动画队列及其停止队列方法

5.1 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。通俗的讲就是会等上一个动画或效果完成后再去执行下一个，直到把触发的所有动画或效果执行完，这往往与我们的本意会背道而驰，所以需要防止该情形的发生，因此，就出现了停止队列方法。

5.2 停止队列

语法：stop()

① stop() 方法用于停止动画或效果。
② 注意：stop() 写到动画或者效果的前面，相当于停止结束上一次的动画，而只要触发当前这次动画或效果即可。

6. 事件切换

6.1 语法规范

语法：hover([over] , out)

① over: 表示鼠标移到元素上要触发的函数（相当于 mouseenter )
② out: 表示鼠标移出元素时要触发的函数 ( 相当于 mouseleave )

6.2 代码体验--案例--下拉菜单

<!-- 导入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        box-sizing: border-box;
    }
    a {
        text-decoration: none;
        color: #666
    }
    .nav {
        margin: 100px;
    }
    .nav>li {
        float: left;
        width: 90px;
        text-align: center;
        line-height: 50px;
        height: 50px;
        background-color: #ccc;
        margin-right: 10px;
    }
    .nav>li>ul {
        display: none;
    }
    .nav>li>ul>li {
        width: 90px;
        height: 45px;
        line-height: 45px;
        background-color: peachpuff;
        border: 1px solid palegoldenrod;
    }
</style>
<body>
    <!-- HTML结构 -->
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li><a href="#">私信</a></li>
                <li><a href="#">评论</a></li>
                <li><a href="#">@我</a></li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 1. 事件切换 hover 就是鼠标经过和离开的复合写法
            // 第一个参数表示鼠标经过，第二个表示鼠标离开
            /* $('.nav>li').hover(function() {
                $(this).children('ul').slideDown(300);
            }, function() {
                $(this).children('ul').slideUp(300);
            }) */

            // 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
            $('.nav>li').hover(function() {
            // stop() 方法必须写到动画的前面，这里的动画是slideToggle()，所以写在它前面
                $(this).children('ul').stop().slideToggle(300);
            });
        })
    </script>
</body>

注意：

① 事件切换 hover 中，第一个参数可以省略，如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数。

② 由于该案例鼠标经过向下滑出二级菜单，鼠标离开向上滑入二级菜单，而滑动效果还有一个滑动切换，所以事件切换 hover 可以结合使用slideToggle() ，使用一个函数就可以实现效果，达成代码的最简。同时在效果前加上stop() 方法，可以阻止出现动画错乱。

7. 案例--高亮显示图片

需求：鼠标移入哪张图片，就突出该图片，即高亮显示

<!-- 导入 jQuery 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- css样式 -->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        background: #000;
    }
    .clear::after {
        content: "";
        display: block;
        clear: both;
    }
    .box {
        margin: 100px auto;
        width: 642px;
        border: 1px solid #ccc;
        padding-left: 10px;
        padding-bottom: 10px;
    }
    .box ul li {
        list-style: none;
        float: left;
        margin: 10px 10px 0 0;
    }
</style>
<body>
    <!-- HTML结构 -->
    <div class="box">
        <ul class="clear">
            <li><img src="images/01.jpg" alt=""></li>
            <li><img src="images/02.jpg" alt=""></li>
            <li><img src="images/03.jpg" alt=""></li>
            <li><img src="images/04.jpg" alt=""></li>
            <li><img src="images/05.jpg" alt=""></li>
            <li><img src="images/06.jpg" alt=""></li>
        </ul>
    </div>
    <!-- js 代码 -->
    <script>
        $(function() {
            $('.box li').hover(function() {
                // 当鼠标移入时，其他的li标签透明度：0.5
                $(this).siblings('li').stop().fadeTo(500, .5);
                // 鼠标离开，其他li 透明度改为1
            }, function() {
                $(this).siblings('li').stop().fadeTo(500, 1)
            })
        })
    </script>
</body>

案例分析：

① 所谓的高亮显示，其实是通过修改透明度实现的，鼠标移入的图片透明度不变，而是改变它的兄弟图片的透明度为0.5，它们变暗了，自然当前图片就显得高亮了；

② 鼠标移出，让其兄弟透明度更改回1，这样当前图片自然不突出了，变为普通样式。

jQuery 给我们封装的这些动画效果，非常简洁好用，而且使用方式几乎一样，所以只要记住一种就可以类比使用其他效果，但要注意特殊效果fadeTo()。