用jQuery实现一个简单手风琴效果

你们若是登过王者荣耀pc端的官网，能够看到下面这个手风琴的效果图：

其实用jQuery实现这样的效果很是简单，下面和你们一块儿简单分析一下这个手风琴的案例。

1、案例分析

1.咱们有7个小li，每一个小li里面有大小两张图片。

2.当鼠标通过某个小li时有两个操做：

①当前小li的宽度变为224px（大图片宽度），同时里面的小图片淡出，大图片淡入。

②其他兄弟小li变为69px（小图片宽度），同时小图片淡入，大图片淡出

2、代码

css部分：

<style type="text/css">       
    * {          
        margin: 0;  
        padding: 0; 
    }           
    img {        
        display: block;    
    }            
    ul {        
        list-style: none;  
    }              
    .king {          
        width: 852px;      
        margin: 100px auto;      
        background: url(images/bg.png) no-repeat;    
        overflow: hidden;       
        padding: 10px;    
    }             
    .king ul {      
        overflow: hidden;   
    }           
    .king li {     
        position: relative;   
        float: left;      
        width: 69px;        
        height: 69px;        
        margin-right: 10px;   
    }             
    .king li.current {    
        width: 224px;    
    }            
    .king li.current .big {  
        display: block;     
    }         
    .king li.current .small {      
        display: none;      
    }             
   .big {        
        width: 224px;    
        display: none;  
    }               
   .small {          
        position: absolute;   
        top: 0;     
        left: 0;        
        width: 69px;          
        height: 69px;       
        border-radius: 5px;  
    }   
 </style>复制代码

js部分：

<script src="js/jquery.min.js"></script> 
<script type="text/javascript">     
   $(function() {  
       // 鼠标通过某个小li 有两步操做： 
       $(".king li").mouseenter(function() {    
            // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入 
             $(this).stop().animate({         
             width: 224             
             }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();       
             // 2.其他兄弟小li宽度变为69px， 小图片淡入， 大图片淡出 
             $(this).siblings("li").stop().animate({           
             width: 69              
             }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();    
        })     
    });复制代码

html部分：

<div class="king"> <ul> <li class="current"> <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> ....... 复制代码

3、效果部分

4、涉及语法

1.自定义动画animate（）

①语法：animate（params，[speed],[easing],[fn]）

②参数：

params：想要更改的样式属性，以对象的形式传递，必须写，属性名能够不带引号，若是是复合属性则须要采起驼峰命名法。

speed：三种预约速度之一的字符串（“show”，“normal”，“fast”），或者用毫秒数表示动画时长。

easing：（Optional）用来指定切换的效果，默认是“swing”，可用参数“liner”。

fn：回调函数，在成动画时执行的函数，每一个元素 执行一次。

2.渐进方式调到指定的不透明度：fadeTo（）

①语法：fadeTo（[speed]，opacity，[easing]，[fn]）

②参数：

opacity为透明度，必须写，范围为0-1之间。

speed：三种预约速度之一的字符串（“show”，“normal”，“fast”），或者用毫秒数表示动画时长。

easing：（Optional）用来指定切换的效果，默认是“swing”，可用参数“liner”。

fn：回调函数，在成动画时执行的函数，每一个元素 执行一次。

3.淡入淡出切换效果：fadeToggle（）

①语法：fadeToggle（[speed，[easing]，[fn]）

②参数：

speed：三种预约速度之一的字符串（“show”，“normal”，“fast”），或者用毫秒数表示动画时长。

easing：（Optional）用来指定切换的效果，默认是“swing”，可用参数“liner”。

fn：回调函数，在成动画时执行的函数，每一个元素 执行一次。

4.淡出效果：fadeOut（）

①语法：fadeOut（[speed，[easing]，[fn]）

②参数：

speed：三种预约速度之一的字符串（“show”，“normal”，“fast”），或者用毫秒数表示动画时长。

easing：（Optional）用来指定切换的效果，默认是“swing”，可用参数“liner”。

fn：回调函数，在成动画时执行的函数，每一个元素 执行一次。

5.淡入效果：fadeIn（）

①语法：fadeIn（[speed，[easing]，[fn]）

②参数：

speed：三种预约速度之一的字符串（“show”，“normal”，“fast”），或者用毫秒数表示动画时长。

easing：（Optional）用来指定切换的效果，默认是“swing”，可用参数“liner”。

fn：回调函数，在成动画时执行的函数，每一个元素 执行一次。

大二菜鸡，记笔记不易，随手点赞，将爱传递hhh。