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

Detailed explanation of CSS multiple three-column adaptive layout implementation

Preface In order to follow the conventional WEB l...

Example of Vue uploading files using formData format type

In Vue, we generally have front-end and back-end ...

JavaScript implementation of drop-down list

This article example shares the specific code of ...

Classes in TypeScript

Table of contents 1. Overview 2. Define a simple ...

Example of Html shielding right-click menu and left-click typing function

Disable right-click menu <body oncontextmenu=s...

How to use CSS to display multiple images horizontally in the center

Let me first talk about the implementation steps:...

Application of CSS3 animation effects in activity pages

background Before we know it, a busy year is comi...

How to query the minimum available id value in the Mysql table

Today, when I was looking at the laboratory proje...

Vue large screen data display example

In order to efficiently meet requirements and avo...

Detailed tutorial for installing influxdb in docker (performance test)

1. Prerequisites 1. The project has been deployed...

Common browser compatibility issues (summary)

Browser compatibility is nothing more than style ...

MySQL replication table details and example code

MySQL replication table detailed explanation If w...

IE8 Beta 1 has two areas that require your attention

<br />Related articles: Web skills: Multiple...