jQuery implements accordion effects

jQuery implements accordion effects

This article shares the specific code of jQuery to implement accordion for your reference. The specific content is as follows

Use jQuery effects (functions as follows):

Code (chain programming):

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery-3.4.1.min.js"></script>
<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>
</head>

<body>
<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>
<li>
<a href="#" >
<img src="../images/c1.jpg" alt="" class="small">
<img src="../images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/w1.jpg" alt="" class="small">
<img src="../images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/z1.jpg" alt="" class="small">
<img src="../images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/h1.jpg" alt="" class="small">
<img src="../images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#" >
<img src="../images/t1.jpg" alt="" class="small">
<img src="../images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>

</body>
<script>
$(function() {
//1. When the mouse passes over the small li, there are two steps: the width of the current small li becomes 225px, and the small picture inside fades out, and the large picture fades in. //2. The width of the remaining brother elements small li becomes 69px, the small picture fades in, and the large picture fades out. $(".king li").mouseenter(function() {
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
})
</script>

</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • jQuery Easyui usage (I) foldable panel layout accordion menu
  • jQuery plugin to create accordion panel effect
  • jQuery makes an awesome accordion menu
  • Simple accordion effect example implemented by jQuery
  • Implementing accordion menu based on Jquery code
  • Make accordion based on slideDown and slideUp of jquery
  • jQuery to achieve accordion effect example code
  • jQuery accordion special effects plugin
  • Jquery component easyUi implements accordion (folding panel) example
  • jQuery to achieve accordion effect

<<:  iview implements dynamic form and custom verification time period overlap

>>:  jQuery realizes the full function of shopping cart

Recommend

Summary of how JS operates on pages inside and outside Iframe

Table of contents Get the content of the iframe o...

Vue implements nested routing method example

1. Nested routing is also called sub-routing. In ...

Solve the docker.socket permission problem of vscode docker plugin

Solution: Kill all .vscode related processes in t...

Example of implementing the skeleton screen of WeChat applet

Table of contents What is a skeleton screen How t...

The difference between method=post/get in Form

Form provides two ways of data transmission - get ...

What to do if you forget your mysql password

Forgot your MySQL password twice? At first I did ...

mysql5.7.14 decompressed version installation graphic tutorial

MySQL is divided into Community Edition (Communit...

MySQL 5.7.17 installation and configuration method graphic tutorial under win7

I would like to share with you the graphic tutori...

MySQL 5.6.27 Installation Tutorial under Linux

This article shares the installation tutorial of ...

Detailed explanation of angular two-way binding

Table of contents Bidirectional binding principle...