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>