Jquery implements the accordion effect and jquery implements the accordion

Jquery implements the accordion effect and jquery implements the accordion

This example describes how jquery implements the accordion effect. Share it with you for your reference. The details are as follows:

The effect process is that when the mouse overwrites the image, the width of the image increases, and the width of the other brothers decreases, the effect is as follows:

The Code is as follows:

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 CSS code:

@ Charset "UTF-8"; * {margin: 0px; padding: 0px; font-family: ""; font-size: 12px; text-decoration: none; list-style-type: none;} img {border: 0px;}/* start */. flash4 {width: 1180px; height: pixel PX; margin: 0 pxauto; margin-bottom: 20px; position: relative ;}. flash4 ul li {width: pixel PX; height: pixel PX; border-left: 1px solid #000; position: relative; overflow: hidden; float: left ;}. flash4 ul li. imgTop img {opacity: 0.4 ;}. flash4 ul li. imgTop img. tm {opacity: 1 ;}. flash4 ul li. imgCon {width: 538px; height: 405px ;}. flash4 ul li. imgCen {width: 538px; height: 50px; background: rgba (0.5, 0,); color: # fff; font-size: 20px; line-height: 50px; position: absolute; left: 0px; bottom: 45px; text-indent: 20px; display: none ;}. flash4 ul li. imgBot {width: 538px; height: 45px; background: #222 ;}. flash4 ul li. imgBot p. bt_1 {width: 80px; line-height: 45px; font-size: 16px; color: # fff; text-indent: 20px; float: left ;}. flash4 ul li. imgBot p. bt_2 {width: 458px; height: 45px; line-height: 45px; float: left; display: none ;}. flash4 ul li. imgBot p. bt_2 span {font-size: 14px; color: # fff; padding-right: 30px; background: url (.. /images/part2_icon.png) no-repeat left center; padding-left: 10px ;}. flash4 ul li. first {width: 538px ;}. flash4 ul li. last {position: absolute; right: 0px; bottom: 0px ;}
JQuery code:

// Var index7 = 0 for the accordion animation effect; // defines the variable and assigns a value of 0; $ (". flash4 ul li "). mouseenter (function () {index7 = $ (this ). index (); $ (this ). stop (). animate ({width: 538}, 500 ). siblings ("li "). stop (). animate ({width: 106}, 500); $ (". imgCen ").eq(index7).css (" display "," block "). siblings (". imgCen ").css (" display "," none "); $ (" p. bt_2 "2.16.eq(index72.16.css (" display "," block "). siblings ("p. bt_2 ").css (" display "," none "); $ (". imgTop img "). eq (index7 ). addClass ("tm "). siblings (". imgTop img "). removeClass ("tm") ;}; $ (". flash4 ul li "). mouseleave (function () {$ (this ). eq (index7 ). stop (). animate ({width: 538}, 500); $ (". imgCen ").css (" display "," none "); $ (" p. bt_2 ").css (" display "," none ");});
Download source code:Jquery implements the accordion Effect
I hope you will like to share the jquery accordion effect.