手风琴案例练习
显示效果
重点：
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>
