1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 ????<meta charset="UTF-8"> 5 ????<title></title> 6 ????<style type="text/css"> 7 ????????* { 8 ????????????margin: 0; 9 ????????????padding: 0;10 ????????}11 ????????ul{12 ????????????list-style: none;13 ????????}14 15 ????????.wrap {16 ????????????width: 1010px;17 ????????????margin: 100px auto 0;18 ????????}19 ????????.wrap li{20 ????????????width: 200px;21 ????????????height: 400px;22 ????????????float: left;23 ????????}24 ????</style>25 ????<script src="../jquery-1.11.1.min.js"></script>26 ????<script>27 ????????$(document).ready(function () {28 ?????????$(‘.wrap li‘).each(function(i,ele){29 ?????????????$(ele).css("background","url(images/"+ (i + 1) +".jpg)");30 ?????????}).mouseenter(function(){31 ?????????????$(this).stop().animate({width:600},500).siblings(‘li‘).stop().animate({width:100},500)32 ?????????}).mouseleave(function(){33 ?????????????$(‘.wrap li‘).stop().animate({width:200},500);34 35 ?????????})36 ????????});37 ????</script>38 </head>39 <body>40 <div class="wrap">41 ????<ul>42 ????????<li></li>43 ????????<li></li>44 ????????<li></li>45 ????????<li></li>46 ????????<li></li>47 ????</ul>48 </div>49 </body>50 </html>jQuery实现的手风琴效果
原文地址：https://www.cnblogs.com/yangguoe/p/8168018.html