爱站程序员基地手风琴案例练习
显示效果
重点：
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>
