Create a JavaScript accordion page and an accordion page

Create a JavaScript accordion page and an accordion page

Don't talk about anything. Go directly.

1. Html Structure Code

<! DOCTYPE html> 
2.css style code
* {Padding: 0px; margin: 0px; font-family: "" ;}# gs {width: 1100px; height: 429px ;}. gs {width: 100px; height: 429px; float: left ;}. gs4 {width: 789px; height: 429px ;}. gs1 {background: url (.. /img/1.jpg) repeat scroll top left ;}. gs2 {background-image: url (.. /img/2.jpg );}. gs3 {background-image: url (.. /img/3.jpg );}. gs4 {background-image: url (.. /img/4.jpg1_1_1_.txt {width: 100px; height: 429px;/* margin: 15px; */background: rgba (0, 0, 0, 0.5); cursor: pointer ;} /*. txt p {float: left; width: 20px; height: 429px; color: # fff; font-size: 20px; margin: 14px ;}*/. txt p {color: # fff; float: left; margin: 15px1_0000.txt. p1 {font-size: 14px; width: 14px00000000.txt. p2 {font-size: 12px; width: 12px ;}
3. javascript code
$(function(){ $(".txt").mouseover(function(){  $(this).parent().stop(true).animate({"width":"789px"},500).siblings().stop(true).animate({"width":"100px"},500); });});
4. Important:
A. Vertical vertical font: font-size = contain font label width
In B. js, the stop () method: stop () indicates that the animation has a transition.
Stop (true) indicates that the animation is paused,
Stop (true, true) indicates that the animation is ended immediately without transition.
C. parent (): locate the upper-level element
Siblings (): Except for this element, other...
Animate (): animation effect
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.