3.6 动画效果相关的方法 3.6.1 简单动画和复杂动画

发表于 更新于 分类于 ， ， Waline： 本文字数： 5.4k 阅读时长 ≈ 5 分钟

3.6 动画效果相关的方法

jQuery 还提供了一些动画效果相关的方法,通过使用这些方法,可以开发出更加友好的UI界面,例如可以实现各种”渐变”动画。

3.6.1 简单动画和复杂动画

简单动画

jQuery提供的简单动画效果相关的方法如下。

显示和隐藏方法

方法 描述
show([duration] [,easing] [,callback]) 将jQuery对象里包含的隐藏的DOM元素以动画方式显示出来。
hide([duration] [,easing] [,callback]) 将jQuery对象里包含的显示的DOM元素以动画方式隐藏起来。
toggle([duration] [,easing] [,callback]) 该方法是show、hide两个方法的综合版本。
toggle(showOrHide) 向该方法传入的参数控制显示或隐藏jQuery对象包含的DOM元素。

以动画方式增加或减少高度

方法 描述
slideDown([duration] [,easing] [,callback]) 该方法将会不断增加当前jQuery对象所匹配DOM元素的高度,直至这些DOM元素完全显示出来。
slideUp([duration] [,easing] [,callback]) 该方法将会不断减小当前jQuery对象所匹配DOM元素的高度,直至这些DOM元素完全隐藏起来。
slideToggle([duration] [,easing] [,callback]) 该方法是slideDown、slideUp两个方法的综合版本。如果当前jQuery 匹配的元素处于隐藏状态,就使用”卷帘”动画将其显示出来;如果它们处于显示状态,就使用”卷帘”动画将其隐藏起来。

不断增加或减少透明度

方法 描述
fadeIn([duration] [,easing] [,callback]) 将jQuery对象匹配的DOM元素以”渐显”的方式显示出来(也就是不断调整透明度)。
fadeOut([duration] [,easing] [,callback]) 将jQuery对象匹配的DOM元素以”渐隐”的方式隐藏起来(也就是不断调整透明度)。
fadeTo(duration,opacity [,easing] [,callback]) 将jQuery对象匹配的DOM元素的透明度调整到opacity值(opacity是一个0到1的浮点数)。
fadeToggle([duration] [,easing] [,callback]) 该方法是fadeIn([duration] [,easing] [,callback])、fadeOut([duration] [,easing] [,callback])两个方法的综合版本。如果当前jQuery 匹配的元素处于隐藏状态,就使用”渐入”动画将其显示出来;如果它们处于显示状态,就使用”渐出”动画将它们隐藏起来。

上述方法支持的参数

上面这些方法都可以使用如下三个参数。

方法 描述
duration 指定该动画的持续时间,可以是”slow"、”normal"或”fast"三个字符串其中之一,也可以是表示动画持续时长的毫秒数,如1000。
easing 指定该动画所使用擦除效果的名称(需要插件支持),jQuery默认只支持”linear"和 “swing"两个值。
callback 指定在动画完成时激发的函数。

程序示例

上面这些方法都可以完成一些简单常用的动画效果。下面的程序示范了这些方法的用法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 动画效果相关的方法 </title>
    <style type="text/css">
        div {
            background-color: #cccccc;
            border: 2px solid black;
            width: 200px;
            height: 120px;
        }
    </style>
</head>

<body>
    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <input type="button" value="toggle" onclick="$('#test1').toggle(1000);" />
    <br />
    <div id="test1">使用toggle控制的元素</div>

    <input type="button" value="slide down" onclick="$('#test2').slideDown(1000);" />
    <input type="button" value="slide up" onclick="$('#test2').slideUp(1000);" />
    <br />
    <div id="test2">使用Slide动画控制的元素</div>
    
    <input type="button" value="fade in" onclick="$('#test3').fadeIn(1000);" />
    <input type="button" value="fade out" onclick="$('#test3').fadeOut(1000);" />
    <br />
    <div id="test3">使用Fade动画控制的元素</div>
</body>

</html>

在浏览器中运行上述页面,即可看到toggle、slideUp、slideDown、fadeIn和fadeOut等几种动画效果。使用上面的函数,开发者可以非常方便地实现与用户交互的动画。

复杂动画

除了上面几个实现简单动画的方法之外,还有以下几个更复杂的方法,通过它们可以进行更复杂的控制。

方法 描述
animate(params[,duration[,easing]][,callback]) 该函数用于创建自定义动画。其中**params是一个形如{prop1:endValue1,prop:endValue2...}的JavaScript对象,用于指定当前jQuery对象包含的DOM对象在动画结束后的状态**;duration用于指定动画持续时间;easing用于指定动画所使用擦除效果的名称(需要插件支持);jQuery 默认只支持”linear" 和”swing"两个值。callback指定动画结束后激发的回调函数。

animate方法的第2种形式

方法 描述
animate(params,options) 该函数是前一个函数的另一种形式。其中params与前一个函数的该参数完全相同;options是一个用于指定复杂选项的JavaScript对象。

animate方法第2种形式的options参数说明

  • duration:指定该动画的持续时间,可以是”slow"、”normal"或”fast"三个字符串其中之一,也可以是表示动画持续时长的毫秒数,如1000。
  • easing:指定该动画所使用擦除效果的名称(需要插件支持),jQuery 默认只支持”linear" 和 “swing"两个值。
    • linear的效果是:整个动画以一个不变的速度行进；
    • swing的效果是:行进速度在动画开始和结束时比在动画中间时稍慢
  • complete:指定在动画完成时激发的函数。
  • step:动画效果每改变一次将导致所指定的函数执行一次。
  • queue:指定是否将该动画函数放入该对象的动画函数队列之后。

程序示例

下面的程序示范了如何使用animate()方法创建自定义动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> 复杂动画效果 </title>
    <style type="text/css">
        div {
            background-color: #cccccc;
            border: 2px solid black;
            width: 200px;
            height: 120px;
        }
    </style>
</head>

<body>
    <script type="text/javascript" src="../jquery-3.1.1.js"></script>
    <input id="bn1" type="button" value="执行动画" />
    <br />
    <div id="test1">自定义动画控制的元素</div>

    <script type="text/javascript">
        // 为id为bn1的按钮绑定事件处理函数
        $("#bn1").click(function () {
            // 为id为test1的元素指定自定义动画
            $("#test1").animate(
                // 下面JavaScript对象指定动画结束时目标元素的状态
                {
                    // 字体大小
                    fontSize: "24pt",
                    // 宽度
                    width: "400px",
                    // 不透明度
                    opacity: 0.5
                },
                // 下面对象指定动画详细选项
                {
                    // 延迟2秒
                    duration: 2000,
                    // 动画行进的开始和结尾比中间慢
                    easing: "swing",
                    // 动画介绍是调用函数
                    complete: function () {
                        alert('动画执行完成！');
                    }
                }
            )
        }
        );
    </script>
</body>

</html>

该程序中的粗体字代码使用animate函数创建了一个自定义动画。
使用animate函数创建自定义动画时有两点需要注意:

  • options中每个属性名都应该采用”驼峰“写法,即fontsize应该写成fontSize。
  • options中每个属性都应该是可以渐变的样式属性,如”height"、”top"或”opacity"等,如果指定一个fontWeight属性,那就不行了。

动画效果全局属性

jQuery为动画效果提供了如下两个全局属性。

方法 描述
jQuery.fx.interval 该属性设置jQuery的两次动画之间的时间间隔(单位是毫秒(ms))。比如设置为50,则表明jQuery动画每秒变化20次。
jQuery.fx.off 如果将该属性设为true,则表明停止所有的jQuery动画效果。在资源比较紧张的设备中使用jQuery时,可以考虑关闭所有jQuery动画来提升性能。