animate的手风琴效果
1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 ul{ 7 list-style: none; 8 } 9 10 .wrap { 11 width: 1020px; 12 margin: 100px auto 0; 13 } 14 .wrap li{ 15 width: 200px; 16 height: 400px; 17 float: left; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="wrap"> 23 <ul> 24 <li></li> 25 <li></li> 26 <li></li> 27 <li></li> 28 <li></li> 29 </ul> 30 </div> 31 </body> 32 </html> 33 <script src="jquery-1.11.1.min.js"></script> 34 <script type="text/javascript"> 35 var list = $("ul li"); 36 list.each(function(index,item){ 37 $(this).css(‘background‘,‘url(images/‘+ (index + 1)+‘.jpg)‘); 38 $(this).mouseenter(function(){ 39 $(this).stop().animate({width:600},1000).siblings().stop().animate({width:100},1000) 40 }) 41 $(this).mouseleave(function(){ 42 list.stop().animate({width:200},1000); 43 }) 44 }) 45 </script>
原文：https://www.cnblogs.com/xiaoyaolang/p/11906785.html