简单实现jQuery手风琴效果

本文实例为大家分享了jQuery实现手风琴效果的具体代码，供大家参考，具体内容如下js代码

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。