jQuery实现王者荣耀手风琴案例（知识块讲解+案例）

jQuery效果动画显示和隐藏效果滑动效果事件的切换动画队列的停止淡入淡出效果自定义动画手风琴案例实践HTML我们搭建好框架CSS样式jQuery来实现动画效果的交互（重点）

Brave-AirPig

5179人浏览 · 2022-03-11 17:07:45

Brave-AirPig · 2022-03-11 17:07:45 发布

前言：

这个案例是几年前的了，现在的王者官网是没有这个手风琴模块的，我了解到这个案例，是受到了黑马程序员知名教师——pink老师的启发，我相信大家也都不陌生，同样也是我非常尊敬的一位老师，我就不做过多的介绍，我们今天系统的讲解一下这个案例，我个人觉得这个案例虽然简单，但是比大部分的手风琴案例都要好上一些，既然是系统的学习，那我们在讲知识点前，先看一下成品效果，当我们鼠标放到小图上时，小图淡出，大图淡入，非常好的效果：

*常用动画都会讲到，内容较多，可以直接点击目录跳到相应位置查看

最后我们来使用jQuery来实现动画效果的交互（重点）

一.jQuery效果动画

我们在之前的博客中已经讲述到过show和hide效果，但是没有具体的阐述过，这次我们系统的阐述一下：

1.显示和隐藏效果：

显示：

语法规范：show([speed,[easing],[fn]])

tips：[ ]中参数可写可不写

我们对参数进行解释：

speed：用来设置此动画的速度，有四个值：slow（慢），normal（自然正常），fast（快），自定义毫秒数（如：1000）；

easing：用来指定切换的效果，有俩个值：swing（默认值【慢-快-慢】），linear（匀速）

fn就不用多说了，我们的老朋友，回调函数（等待动画执行完毕在执行回调函数里的操作）

隐藏：

语法规范：hide([speed,[easing],[fn]])

和上面显示效果的参数一致，在这里我们不做过多解释

2.滑动效果：

*s,e,fn是speed,easing,fn的简写

下滑动：sildeDown([s],[e],[fn])

上滑动：sildeUp([s],[e],[fn])

滑动切换效果： sildeToggle([s],[e],[fn])

tips:滑动切换的意思是：触发一次事件，就上滑动/下滑动一次，交替进行，如果这次触发是上滑动，那么下一次触发就是下滑动

3.事件的切换：

hover([over,]out)

我们来对参数解释一下：

over:鼠标移动到元素上触发的函数（相当于原生JS里的mouseenter）

out:鼠标移出元素所触发的函数（相当于原生JS里的mouseleave）

理论我们讲述完毕，我们这里使用代码演示一下，因为事件切换和之前的语法使用不太一样：

$("div").hover(function(){},function(){})
//我们获取div元素
//第一个函数表示经过div所做出的动画或效果
//第一个函数表示离开div所做出的动画或效果

这里提供一种更加简便的写法：

$("div").hover(function(){
    $(this).slideToggle();
});
//我们只写一个函数方法，在唯一的这个函数里，写上我们的切换效果
//我们使用上面讲到过的滑动切换来举例子
//无论鼠标经过还是厉害，都会切换函数里的触发滑动切换实现效果

4.动画队列的停止：

我们学了动画是为了展现更好的交互效果，那为什么又要学习停止动画呢？

是因为动画效果有队列这一个解释：

动画效果一旦触发就会去执行，如果用户使其一直触发，就会造成多个动画效果排队执行的情况，会使用户体验非常的差，所以我们需要在当前这个动画执行时，先将之前的动画停止，这样就实现了无论用户触发多少次，在当下只会执行当前触发的这一个动画效果

停止排队：

语法规范：stop()

tips:stop()需要写在动画效果之前，相当于停止上一层动画

$("div").hover(function(){
    $(this).stop().slideToggle();
});

5.淡入淡出效果：

语法规范：

淡入：fadeIn([speed,[easing],[fn]])

淡出：fadeOut([speed,[easing],[fn]])

淡入淡出切换：fadeToggle([speed,[easing],[fn]])

渐进方式调整元素达到指定的不透明度： fadeTo(speed,opacity[easing],[fn])

tips:渐进调整透明度时——opacity和speed时间必须要写

6.自定义动画

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

我们来解释一下这个新参数：

params:填写想要更改的样式属性【要以对象的形式来转递，必须要写，属性名可以不用带引号】

我们这个自定义动画和之前的动画效果传递方式不一样，所以我们这里使用代码书写一个小案例（点击按钮，让盒子做一些动画效果）：

$(function(){
    $("button").click(function(){
        $("div").animate({//必须以对象的形式来写
            width:500,
            top:500,
            opacity:.4,
            backgroundColor:"#000"
        },500);
    });
});

二.手风琴案例实践

首先利用HTML我们搭建好框架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 引入我们的jQuery文件 -->
    <script src="./js/jquery.min.js"></script>
</head>
<body>
    <!-- 创建盒子存放元素 -->
    <div class="bigbox">
        <!-- 盒子里创建ul存放每一个li小块 -->
        <ul>
            <!-- 利用li存放俩张图片 -->
            <!-- 思路：鼠标移动到li上，让li的大图显示，小图隐藏 -->
            <li class="current">
                <!-- a标签是为了可以点击跳转到相应英雄介绍，整体项目开发会用到 -->
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>
</body>
</html>

然后设置我们的CSS样式：

 /* 初始化 */
    *{
        margin: 0 auto;
        padding: 0;
    }
    img{
        width: 100%;
        height: 100%;
    }
    ul{
        list-style: none;
    }
    /* 大盒子 */
    .bigbox{
        width: 800px;
        /* height: 100px; */
        background-image: url(./images/bg.png);
        padding: 10px;
        margin-top: 10vh;
        overflow: hidden;
    }
    /* 设置每一个li */
    .bigbox ul li{
        position: relative;
        float: left;
        width: 69px;
        height: 69px;
        margin: 10px;
    }
    /* 图片的设置 */
    .big{
        display: none;
        border-radius: 5px;
        width: 224px;
    }
    .small{
        position: absolute;
        top: 0;
        left: 0;
        width: 69px;
        height: 69px;
        border-radius: 5px;
    }
    /* current类名设置 */
    .bigbox ul .current .big{
        display: block;
    }
    .bigbox ul .current .small{
        display: none;
    }
    .bigbox ul .current{
        width: 224px;
    }

最后我们来使用jQuery来实现动画效果的交互（重点）：

$(function(){
        // console.log($(".bigbox>ul li"));
        //获取到li元素，注册一个鼠标经过事件
      $(".bigbox>ul li").mouseenter(function(){
        //   console.log(this);
        //为当前经过的这个li创建一个自定义动画效果，在动画效果前加上stop()之前我们讲过
        //是为了停止上一层动画，直接执行当前动画，防止出现动画排队执行的bug
        $(this).stop().animate({
            width: 224
        //当前元素中子代类名为small的元素淡出，其兄弟元素淡入
        //经过当前li，让当前li的小图片淡出，大图片淡入
        }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
        //当前元素的所有li兄弟的元素执行动画
        $(this).siblings("li").stop().animate({
            width: 69
        //经过当前li，让当前li的所有兄弟元素的小图片淡入，大图片淡出
        //指定的子代元素中类名为small的元素淡入，其兄弟元素淡出
        }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
      })
    })

这样我们的手风琴案例就完成了

再次声明：案例原创作者：黑马——pink老师

二度创做者：前端小窝

感谢观看，学习前端，关注小蜗