如何实现jQuery手风琴效果

这篇文章主要介绍如何实现jQuery手风琴效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

js代码：

<script type="text/javascript" src="jquery-3.0.0.js"></script> <script type="text/javascript">    $(function() {     //获取所有li遍历     $(".li_list").each(function() {      //当鼠标进去当前li      $(this).mouseenter(function() {       //设置当前元素宽度       $(this).stop()         .animate({ "width": "600px" }, 500, "linear");         //设置同胞元素宽度         .siblings().stop()            .animate({ "width": "100px" }, 500, "linear");      });     });    });   </script>

css代码：

 .li_list {     width: 100px;     height: 300px;     list-style: none;     float: left;     overflow: hidden;    }    .li_list img {     width: 100%;     height: 100%;    }    .divbg {     width: 600px;     height: 300px;     background: rgba(230, 0, 0, 0.5);     text-align: center;     line-height: 300px;     float: left;    }    .divbg span {     display: block;     width: 100px;     height: 300px;     float: left;    }    .div1 {     width: 500px;     height: 300px;     float: left;    }    .mo{     width: 600px;    }

html代码：

<ul class="ul_list">    <li class="li_list">     <div class="divbg">      <span>萌宠</span>      <div class="div1">       <img src="img/0.jpg" />      </div>     </div>    </li>    <li class="li_list">     <div class="divbg">      <span>萌宠</span>      <div class="div1">       <img src="img/1.jpg" />      </div>     </div>    </li>    <li class="li_list">     <div class="divbg">      <span>萌宠</span>      <div class="div1">       <img src="img/2.jpg" />      </div>     </div>    </li>    <li class="li_list mo">     <div class="divbg">      <span>萌宠</span>      <div class="div1">       <img src="img/3.jpg" />      </div>     </div>    </li>   </ul>

以上是“如何实现jQuery手风琴效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！