jQuery动画(带参数)

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4     <meta charset="utf-8">
 5     <title>动画综合</title>
 6     <script src="jquery-1.12.0.min.js"></script>
 7     <script> 
 8         $(document).ready(function(){
 9               $("#start").click(function(){
10                    $("div").animate({
11                         "left":"100px"
12                    },3000)
13 
14                    $("div").animate({
15                          "fontSize":"2em"
16                    },3000);
17               });
18 
19               $("#stop").click(function(){
20                     $("div").stop();
21               });
22 
23               $("#stop2").click(function(){
24                   $("div").stop(true);
25               })
26 
27               $("#stop3").click(function(){
28                    $("div").stop(true,true)
29               })
30           
31         });
32     </script> 
33 </head>
34 <body>
35     <button id="start">开始</button>
36     <button id="stop">停止</button>
37     <button id="stop2">停止所有</button>
38     <button id="stop3">停止动画,但完成动作</button>
39     <p>点击 "开始" 按钮开始动画。</p>
40     <p>点击 "停止" 按钮停止当前激活的动画,但之后我们能再动画队列中再次激活。</p>
41     <p>点击 "停止所有" 按钮停止当前动画,并清除动画队列,所以元素的所有动画都会停止。</p>
42     <p>点击 "停止动画,但完成动作" 快速完成动作,并停止它。</p> 
43     <div style="background:#98bf21;height:100px;width:200px;position:absolute;">Hello W</div>
44 </body>
45 </html>
posted @ 2019-08-16 08:23  码农下的天空  阅读(334)  评论(0编辑  收藏  举报
点击这里给我发消息
在线沟通 返回顶部
欢迎关注公众号

惊风随笔