手风琴效果 animate

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>

 

 

posted @ 2019-11-21 17:06  野鹤亦闲云  阅读(266)  评论(0)  编辑  收藏  举报