Easily achieve jquery accordion effect_javascript skills-JS Tutorial-php.cn

Easily achieve jquery accordion effect_javascript skills

WBOY

Release： 2016-05-16 15:19:45

Original

1059 people have browsed it

The JQuery animation special effect I will explain to you is the accordion. Without further ado, let’s take a look at the final rendering first.

1. Analysis of implementation principles

Corresponding stereogram:

2. HTML code analysis

<body> 
  <div id="container"> 
    <ul id="content"> 
      <li class="first"> 
        <h3>真</h3> 
        <div><img src="images/0.jpg"/></div> 
      </li> 
      <li class="second"> 
        <h3>的</h3> 
        <div><img src="images/1.jpg"/></div> 
      </li> 
      <li class="third"> 
        <h3>爱</h3> 
        <div><img src="images/2.jpg"/></div> 
      </li> 
      <li class="forth"> 
        <h3>你</h3> 
        <div><img src="images/4.jpg"/></div> 
      </li> 
    </ul> 
  </div> 
</body>

Copy after login

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

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

3. 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 div{ 
      float: left; 
      width: 560px; 
      height:300px; 
    }

Copy after login

1. * and img tags are used to remove system default 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 child elements, so it is relatively positioned (position: relative).

3. #container #content is to remove the default small dot effect of ul.

4. All li are absolutely positioned, and their size is 590 * 300, then set the left value of the following li, and set the h3 (yellow area) attribute of the li to float.

After all the above css styles are set, the final effect will be the effect in the analysis picture.

4. JQuery code analysis

The js interactive code of the accordion is actually very simple. It just needs 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); 
      }); 
       
    });

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone’s study.