手风琴案例练习，供大家参考，具体内容如下
显示效果
重点：
1.鼠标进入事件mouseenter 鼠标离开事件mouseleave
2. 再执行下一次操作前都要先通过.stop() 停止动画
3.sublings()选择当前事件外的兄弟事件
完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/CSS"> *{ margin: 0; padding:0; } img{ width: 500px; height:250px; } .box{ width: 900px; height: 300px; margin: 20px auto; border: 1px solid #808080; } .box ul li{ float: left; list-style: none; overflow: hidden; height: 300px; width: 100px; position: relative; } .text{ background-color:lightsteelblue; opacity: 0.7; text-align: center; height: 50px; width: 100%; line-height: 50px; position: absolute; color: black; bottom: 50px; } .link{ background-color:whitesmoke; font-size: 15px; text-indent: 20px; height:50px ; line-height: 50px; } a{ text-decoration: none; } p{ float: left; } span{ margin: auto 20px; } </style> </head> <body> <div class="box"> <ul> //每一个li为一个手风琴页面的显示内容 <li class="show" style="width: 500px;"> <div class="img"> <img class="show" src="img/images/p0.jpg" > </div> <div class="text"> 东大门 </div> <div class="link"> <a href=""> <p>科技</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> <li > <div class="img"> <img src="img/images/p1.jpg" > </div> <div class="text"> 雷阳广场 </div> <div class="link"> <a href=""> <p>科技</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> <li > <div class="img"> <img src="img/images/p3.jpg" > </div> <div class="text"> 校园石碑 </div> <div class="link"> <a href=""> <p>东大门</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> <li > <div class="img"> <img src="img/images/p4.jpg" > </div> <div class="text"> 钟楼 </div> <div class="link"> <a href=""> <p>科技</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> <li > <div class="img"> <img src="img/images/p5.jpg" > </div> <div class="text"> 椰林 </div> <div class="link"> <a href=""> <p>科技</p> <p> <span>科技故事</span> <span>科技故事</span> <span>科技故事</span> </p> </a> </div> </li> </ul> </div> </body> <script src="./js/jquery-3.1.1.min.js" type="text/JavaScript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ var $li=$("ul>li") $li.mouseenter(function () { //鼠标移入图片宽度变为500，siblings（）把其他兄弟的宽度恢复默认宽度。 //stop():在执行每次的事件前都必须停止上次的执行的事件,否则会出现最后一次鼠标事件移出后，图片显示空白 $(this).stop().animate({width:500}).siblings().stop().animate({width:100}); }); $li.mouseleave(function () { //鼠标移出事件 $(this).stop().animate({width:500}); }); }); </script> </html>
