jquery--jquery循环/动画/动画实例-手风琴效果

jquery动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

$('#div1').animate({
    width:300,
    height:300
},1000,swing,function(){
    alert('done!');
});

参数可以写成数字表达式：

$('#div1').animate({
    width:'+=100',
    height:300
},1000,swing,function(){
    alert('done!');
});
 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquery循环</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript">
12         $(function(){
13             //$('#list li').html('111');
14             $('#list li').each(function(index){   //index 是索引值
15                 //alert(index);
16                 $(this).html(index);
17             })
18         })
19     </script>
20 
21 </head>
22 <body>
23 <ul id="list">
24     <li></li>
25     <li></li>
26     <li></li>
27     <li></li>
28     <li></li>
29     <li></li>
30     <li></li>
31 </ul>
32 </body>
33 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquery动画</title>
 9 
10     <style type="text/css">
11         .box{
12             width:100px;
13             height:100px;
14             background-color:gold;
15         }
16     </style>
17 
18     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
19     <script type="text/javascript">
20 
21         /*
22              参数：
23             1、属性设置{param1: value1, param2: value2}
24             2、speed 时间 ms
25             3、swing 默认值 开始和结束慢速，中间快速   linear 匀速
26             4、回调函数
27         */
28 
29         $(function(){
30             $('#div1').animate({width:200,height:200},1000,'linear',function(){
31                 //alert('动画完了！')
32                 $(this).animate({marginLeft:500},1000,function(){
33                     $(this).animate({marginTop:500},1000)
34                 });
35             })
36         })
37     </script>
38 
39 </head>
40 <body>
41 
42     <div class="box" id="div1"></div>
43 </body>
44 </html>

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>jquery动画实例-手风琴效果</title>
 9 
10     <style>
11         *{margin:0;padding:0;}
12         body{font-size:12px;}
13         #accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
14         #accordion ul{list-style:none;}
15         #accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
16         #accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
17         #accordion ul li img{display:block; float:right;}
18         .bar01{left:0px;}
19         .bar02{left:643px;}
20         .bar03{left:664px;}
21         .bar04{left:685px;}
22         .bar05{left:706px;}
23         .bar01 span{background:#09E0B5;}
24         .bar02 span{background:#3D7FBB;}
25         .bar03 span{background:#5CA716;}
26         .bar04 span{background:#F28B24;}
27         .bar05 span{background:#7C0070;}
28     </style>
29 
30     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
31     <script type="text/javascript">
32         $(function(){
33             $('#accordion li').click(function(){
34                 $(this).animate({left:$(this).index()*21});
35 
36                 $(this).prevAll().each(function(){
37                     $(this).animate({left:$(this).index()*21});  //将点击事件之前所有都往左移
38                 })
39 
40                 $(this).nextAll().each(function(){
41                     $(this).animate({left:727-(5-$(this).index())*21})  //将点击事件之后所有都往右移
42                 })
43             })
44         })
45     </script>
46 
47 </head>
48 <body>
49 
50     <div id="accordion">
51         <ul>
52         <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
53         <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
54         <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
55         <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
56         <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
57         </ul>
58     </div>
59 
60 </body>
61 </html>

posted on 2019-12-22 12:09  cherry_ning  阅读(363)  评论(0)    收藏  举报

导航