Home > Article > Web Front-end > How to implement accordion effects using jquery

How to implement accordion effects using jquery

亚连Original: 2018-06-08 15:48:271509browse

Now I will share with you a jquery application example_sample code to implement accordion special effects. It has a very good reference value and I hope it will be helpful to everyone.

Effect:

##The example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{padding: 0px;margin: 0px;}
  li{
   width: 80px;height:300px;
   float: left;overflow: hidden;
   list-style: none;
  }

 </style>
 <script type="text/javascript "src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>
<body>
<script >
 $(function () {
  $("ul li").mouseover(function (){
   $(this).stop().animate({width:350},500)//stop函数：停止当前正在运行的动画
   //siblings:遍历
   $(this).siblings().stop().animate({width:80},500)//anmate：500ms后将其width变为80px；
  })
 })
</script>
<p>
 <ul>
 <li style="width: 350px"><img src="1.jpg"></li>
 <li><img src="2.jpg"></li>
 <li><img src="3.jpg"></li>
 <li><img src="4.jpg"></li>
 <li><img src="5.jpg"></li>
 </ul>
</p>
</body>
</html>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use the image annotation component in jquery.picsign

How to package the koa2 framework app through webpack, what to do ?

Detailed interpretation of Vue component development ideas

The above is the detailed content of How to implement accordion effects using jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the three-level linkage selector in WeChat mini programNext article：How to use the three-level linkage selector in WeChat mini program

See more

How to implement accordion effects using jquery

Related articles