Easy Implementation of jquery accordion effect _ javascript skills

This article mainly introduces you to the detailed code for implementing the jquery accordion effect, which has some reference value. Interested friends can refer to the JQuery animation effects explained for you as the accordion, let's talk a little bit about it. Let's first look at the final implementation.

I. Implementation Principle Analysis

Corresponding stereoscopy:

Ii. HTML code analysis

   
     
 
 
       
  
  
True
 
       
  
  
Of
 
       
  
  
Love
 
       
  
  
You
 
     
 
 
   
  

1. p with the id of container is the red area in the above analysis.
2. ul whose id is content is used to store all li resources.

3. Each li is a combination of a red area and the corresponding image.

Iii. CSS code analysis

*{margin: 0; padding: 0;}      img{       border:0;     }      #container     {       width:680px;       height: 300px;       margin: 100px auto;       position: relative;       border:3px solid red;       overflow: hidden;     }      #container #content     {       list-style: none;     }      #container #content li{       width:590px;       height:300px;       position: absolute;     }      #container #content li.second{       left:590px;     }      #container #content li.third{       left:620px;     }      #container #content li.forth{       left:650px;     }      #container #content li h3{       float:left;       width: 24px;       height:294px;       border:3px solid blue;       background-color: yellow;       cursor: pointer;     }      #container #content li p{       float: left;       width: 560px;       height:300px;     } 

1. * And img labels are used to remove default system gaps and other effects.
2. # container is the visible area analyzed above, so its size is 680*300, and it is the container of all sub-elements, so it is relative positioning (position: relative ).

3. # container # content is used to remove the default dot Effect of ul.

4. All li uses absolute positioning and their sizes are 590*300. Then, set the left value of li and set the h3 (yellow area) attribute of li to float.

After all the above css styles are set, the final effect is the effect in the analysis graph.

Iv. JQuery code analysis

The js interaction code of the accordion is actually very simple, that is, to change the left value corresponding to the absolute position of li in real time. The Code is as follows:

$(function(){        $("#container #content li.first h3").mouseenter(function(){         $("#container #content li.second").stop().animate({"left":590}, 1000);         $("#container #content li.third").stop().animate({"left":620}, 1000);         $("#container #content li.forth").stop().animate({"left":650}, 1000);       });        $("#container #content li.second h3").mouseenter(function(){         $("#container #content li.second").stop().animate({"left":30}, 1000);         $("#container #content li.third").stop().animate({"left":620}, 1000);         $("#container #content li.forth").stop().animate({"left":650}, 1000);       });        $("#container #content li.third h3").mouseenter(function(){         $("#container #content li.second").stop().animate({"left":30}, 1000);         $("#container #content li.third").stop().animate({"left":60}, 1000);         $("#container #content li.forth").stop().animate({"left":650}, 1000);       });        $("#container #content li.forth h3").mouseenter(function(){         $("#container #content li.second").stop().animate({"left":30}, 1000);         $("#container #content li.third").stop().animate({"left":60}, 1000);         $("#container #content li.forth").stop().animate({"left":90}, 1000);       });            }); 

The above is all the content of this article, hoping to help you learn.