用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。