198°

jQuery之animate()用法

最近在学习jQuery,看到一个很有意思的函数animate(),但是在网上却没有查到相关的详细资料,于是打算参考jQuery API,自己总结一下。

概述

animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

用法一

$(selector).animate({styles},speed,easing,callback) //创建自定义动画

styles: 必需,定义形成动画的css属性。需要使用驼峰法书写所有的属性名,如paddingLeft而不是padding-left。也可以定义相对值,即相对于元素当前值做改变。需要在指的前面加上 +=或者-=。还可以使用预定义值,属性的动画值设置为 show/hide/toggle。

speed: 可选,定义效果的时长。可取值slow、normal(默认)、fast 或者毫秒数。

easiing: 可选,定义在不同动画点中设置动画速度。内置的easing函数有:swing(缓冲,默认值)、linear(匀速),可通过js文件扩展。

callback:可选,定义在动画完成后所执行的函数名称。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自定义动画animate()</title>
 6     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
 7 </head>
 8     <script type="text/javascript">
 9     $(document).ready(function(){
10         $('button').click(function(){
11             $('div').animate({
12             height:"300px",
13             width:"+=100px", // 相对值
14             //:"width":"hide" //预定义值
15             },
16             "slow",
17             "linear",
18             function(){
19                 alert("高度为:"+ $("div").height())
20             });
21         });
22     })
23 
24     </script>
25 
26 <body>
27 <button>开始动画</button>
28  <!-- 默认所有的HTML 元素都有一个静态位置,且无法移动。如需要对位置进行操作,要先把元素的position属性 -->
29 <div style="background:red;height:100px;width:100px;position:absolute;">
30 </div>
31 
32 </body>
33 </html>

用法二

$(selector).animate({styles},{options})

 styles: 必需,定义形成动画的css属性。用法同上

optins: 可选,定义动画的额外选项。

  可能的值有:

    speed:设置动画的速度。

    easing:定义要使用的easing函数。

    callback:定义动画完成后要执行的函数。

    step:定义动画的每一步完成后要执行的函数。

    queue:布尔值,指示是否在效果队列中放置动画。如果为false,则动画将立即开始。

    specialEasing:定义styles参数的一个或多个 CSS 属性的映射,以及他们对应的 easing 函数。

其他几个与上面的用法类似,主要来看看 step 和 queue 。

默认地,jQuery 提供针对动画的队列功能。这意味着如果编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自定义动画animate()</title>
 6     <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
 7 </head>
 8     <style type="text/css">
 9         div {
10         background-color: #bca;
11         width: 200px;
12         height: 1.1em;
13         text-align: center;
14         border: 2px solid green;
15         margin: 3px;
16         font-size: 14px;
17       }
18     </style>
19     <script type="text/javascript">
20     $(document).ready(function(){
21         $('#first').click(function(){
22         // 默认地,动画会依次执行
23             $('#div1').animate({height:"200px"})
24                 .animate({width:"+=100px"},"slow")
25                 .animate({fontSize:"50px"},"slow");
26         });
27         $('#second').click(function(){
28         // 第一个动画不在队列中,则前两个一起执行
29             $('#div2').animate({height:"200px"},{queue:false})
30                 .animate({width:"+=100px"},"slow")
31                 .animate({fontSize:"50px"},"slow");
32         });
33     });
34     </script>
35 
36 
37 <body>
38 <button id="first">div1</button>
39 <button id="second">div2</button>
40 <div id="div1">div1</div>
41 <div id="div2">div2</div>
42 </body>
43 </html>

未完待续。。。

原文链接:https://www.cnblogs.com/readerman/p/10170610.html

全部评论: 0

    我有话说: