十四、animate()函数

发表于 | 更新于: | 分类于 ， ， |
| 字数: 2.3k | 时长 ≈ 10 分钟

十四、animate()函数

14.1 概述

animate()是基于重点状态的动画

  • animate()：接收2个参数

    • 第一个参数：json 表示终点状态

    • 第二个参数：完成动画的时间。单位ms，省略不写

1
2
3
4
5
6
7
8
9
10
11
// 让所有的p移动到left：500px;的位置
// 选中所有的p，json{"left" : 500} left值改为500，动画未完成时间为2s
$("p").animate({"left" : 500}, 2000);

p {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-bottom: 10px;
    position: relative; 
}

UAjYnJ.png

14.2 能够参与动画的属性

  • 所有数值型的属性都可以参与动画

    • width

    • height

    • border

    • left、right、top、bottom

    • border-radius

    • ……

  • 不能参与动画的属性：

    • background-color

    • background-position

    • css3的一些复杂属性（transform）

1
2
3
4
5
6
7
$("p").animate({
    "width" : 200,
    "height" : 200,
    "border-radius" : "50px",
    "backgroundColor" : "blue",  // 不能参与动画
    "left" : 500
},2000);

UAjdtx.png

14.3 动画的执行顺序

14.3.1 同一元素的不同animate，是按照绑定顺序执行的

1
2
3
4
// 绑定第一个动画
$("p").animate({"left" : 500},2000);
// 绑定第二个动画
$("p").animate({"top" : 200},2000);

UAj6nH.png

1
2
3
4
$("p").animate({
    "left" : 500,
    "top" : 200
},2000);

UAj49f.png

14.3.2 不同元素的animate的执行顺序

不同元素的animate的执行顺序，同时执行

1
2
3
4
// 分别绑定动画
$("p").animate({"left" : 500},2000);

$("#box").animate({"left" : 500},2000);

UV86oQ.png

14.3.3 animate()和css()的执行顺序

  • animate()需要花费时间

  • css()瞬间完成

1
$("#box").animate({"left" : 500},2000).css("background-color","red");

UV84yV.png

14.4 回调函数

14.4.1 异步语句

类似于animate()这种需要花费时间的语句，如果后面还有其他js代码，这些代码会立即执行。不会死等animate()函数执行完毕之后再去执行。

异步语句都有一个回调函数，异步语句执行完毕之后要做的事要写在回调函数当中。

比如：做一个肉菜，第一步需要解冻肉。

把肉放在微波炉中进行解冻需要10min。在这期间，我们还可以洗菜、……，等到微波炉叮一声之后（叮之后就是回调函数），将肉拿出，开始做肉菜，做肉菜就是要写在回调函数中。

animate() show(1000) hide(1000) slideDown() slideUp() fadeIn() fadeout()这些都是异步语句，都需要花费时间。

14.4.2 回调函数

  • animate({},time,callback)

    • 第一个参数：json

    • 第二个参数：time 完成动画的时间

    • callBack：回调函数

1
2
3
4
// 让box运动完毕之后改变box的背景颜色
$("#box").animate({"left" : 500},2000,function(){
    $(this).css("background-color","red");
});

UV87o4.png

比如fadeIn()也可以书写回调函数：

1
2
3
4
// 淡入时间为2s，淡入之后立即变色
$("#box").fadeIn(2000,function(){
    $(this).css("background-color","red");
});

UV8LWR.png

14.5 delay()延迟

delay()：表示延迟，只能书写在动画的前面，参数就是要延迟的时间。

animate() show(1000) hide(1000) slideDown() slideUp() fadeIn() fadeout()

1
2
3
4
5
6
// 点击btn，让box延迟2s再执行动画
$("#btn").click(function(){
    $("#box").delay(2000).animate({"left" : 500},2000,function(){
        $(this).css("background-color","blue");
    });
});

UV8xOK.png

利用delay()可以控制元素的进场顺序

1
2
3
4
// 控制元素进场顺序
$("p").each(function(i){
    $(this).delay(500 * i).show(0);
});

UVGiYd.png

14.6 stop()立即停止动画

  • stop()：表示让运动的元素立即停止动画

    • 接收2个参数：都是布尔值 默认值都是false

    • 参数1：是否清空当前的动画队列

    • 参数2：是否立即完成当前动画

  • stop(false,false) 等价方式stop() 表示立即进入下一个动画，立即停止当前动画

  • stop(false,true) 表示立即进入下一个动画，立即停止并完成当前动画

  • stop(true,true) 表示清空当前动画队列，立即停止并完成当前动画

  • stop(true,false) 等价方式stop(true) 表示清空当前动画队列，立即停止当前动画（最常用，点哪停哪，后面动画不再执行）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$("#box").animate({"left": 500},2000);
$("#box").animate({"top": 500},2000);
$("#box").animate({"left": 50},2000);
$("#box").animate({"top": 50},2000);

// stop(false,false) 等价方式stop() 表示立即进入下一个动画，立即停止当前动画
$("#btn1").click(function(){
    $("#box").stop();
});
// stop(false,true) 表示立即进入下一个动画，立即停止并完成当前动画
$("#btn2").click(function(){
    $("#box").stop(false,true);
});
// stop(true,true)  表示清空当前动画队列，立即停止并完成当前动画
$("#btn3").click(function(){
    $("#box").stop(true,true);
});
// stop(true,false) 等价方式stop(true) 表示清空当前动画队列，立即停止当前动画   
$("#btn4").click(function(){
    $("#box").stop(true);
});

UVGQYj.png

14.7 防止动画积累

一个元素身上可以存在多个动画事件，尤其是在不经意间就会造成动画积累，此时我们就要防止动画积累（也叫做“防流氓”）。

比如：现在有一支队伍，接到了命令，要前往广州，再去广州的路上又接到了命令，回北京。此时这支队伍有两个选择：

① 立即执行新的任务，放弃原有任务

利用stop(true)可以实现

1
2
3
4
5
6
7
8
// 去广州
$("#btn2").click(function(){
    $("#box").stop(true).animate({"left":1000},2000);
}); 
// 回北京
$("#btn1").click(function () {
    $("#box").stop(true).animate({ "left": 50 }, 2000);
});

② 只有当元素不运动的时候，才接收新的任务

  • is()方法：表示元素是否具备某种状态

    • is(“:animated”) 表示当元素运动的时候返回true，当元素不运动的时候返回false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 当元素运动的时候，不接受新的任务
$("#btn2").click(function(){
    // 当元素运动的时候，不接受任务
    if($("#box").is(":animated")){
        // 停止执行代码
        return;
    }
    // 当元素不运动的时候，才接受新的任务
    $("#box").animate({"left":1000},2000);
}); 
// 当元素不运动的时候，才接受新的任务
$("#btn1").click(function () {
    // !true   
    if(!$("#box").is(":animated")){
        $("#box").animate({"left":50},2000);
    }
});

UVGG60.png

14.8 案例：呼吸轮播图

UVJpj0.png

14.8.1 DOM

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div class="box" id="carouse">
    <div class="imgs" id="imgs">
        <ul>
            <li><img src="images/lunbo/1.jpg" alt=""></li>
            <li><img src="images/lunbo/2.jpg" alt=""></li>
            <li><img src="images/lunbo/3.jpg" alt=""></li>
            <li><img src="images/lunbo/4.jpg" alt=""></li>
            <li><img src="images/lunbo/5.jpg" alt=""></li>
        </ul>
    </div>
    <div class="btns">
        <a href="javascript:void(0)" id="leftBtn">&lt;</a>
        <a href="javascript:void(0)" id="rightBtn">&gt;</a>
    </div>
    <div class="circles" id="circles">
        <ol>
            <li class="cur">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
    </div>
</div>

14.8.2 css

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<style>
    /* 清楚默认样式 */
    * {
        margin: 0;
        padding: 0;
    }
    ul, ol {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    a {
        text-decoration: none;
    }
    .box {
        width: 220px;
        height: 150px;
        margin: 50px auto;
        border: 1px solid #000;
        position: relative;
    }
    /* 呼吸轮播图的关键是所有图片摞在一起 */
    .box .imgs ul li {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: none;
    }
    .box .imgs ul li:first-child {
        display: block;
    }
    .btns a {
        position: absolute;
        width: 20px;
        height: 40px;
        top: 50%;
        margin-top: -20px;
        background-color: rgba(0,0,0,.5);
        color: #fff;
        font-size: 20px;
        line-height: 40px;
        text-align: center;
        /* 大于小于号开口变大 */
        font-family: consolas;
    }
    .btns a:first-child {
        left: 10px;
    }
    .btns a:last-child {
        right: 10px;
    }
    .box .circles {
        position: absolute;
        width: 140px;
        height: 20px;
        left: 50%;
        margin-left: -70px;
        bottom: 15px;
    }
    .box .circles ol {
        width: 150px;
        
    }
    .box .circles ol li {
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 10px;
        background-color: blue;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
    }
    /* .box .circles ol li:last-child {
        margin-right: 0;
    } */
    .box .circles ol li.cur {
        background-color: orange;
    }
</style>

14.8.3 jquery

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!-- 引入jquery包 -->
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    // 获取元素 命名时加上$提醒我们是一个jquery对象
    var $leftBtn = $("#leftBtn");
    var $rightBtn = $("#rightBtn");
    var $imgs = $("#imgs ul li");
    var $circles = $("#circles ol li");
    var $carouse = $("#carouse");

    // 定义length
    var length = $imgs.length;
    // 定义信号量
    var idx = 0;

    // 开启定时器 平时图片轮播，相当于右按钮事件
    var timer = setInterval(change,2000);
    // 鼠标移入 清除定时器
    $carouse.mouseenter(function(){
        clearInterval(timer);
    });
    // 鼠标离开 开启定时器
    $carouse.mouseleave(function () {
        // 设表先关
        clearInterval(timer);
        // 重新赋值timer
        timer = setInterval(change,2000);
});

    // 右按钮点击事件 将函数提取出来
    $rightBtn.click(change);
    function change(){
        // 防流氓
        if($imgs.is(":animated")){
            return;
        }   
        // 当前图片淡出
        $imgs.eq(idx).fadeOut(600);
        // 信号量改变
        idx++;
        // 边界判定
        if (idx > length - 1) {
            // idx归0
            idx = 0;
        }
        // 下一张图片淡入
        $imgs.eq(idx).fadeIn(600);
        // 当前小圆点加cur 它的兄弟去掉cur
        $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
        console.log(idx);  // 查看图片顺序       
    }
    // 左按钮点击事件
    $leftBtn.click(function () {
        // 防流氓
        if (!$imgs.is(":animated")) {
            // 当前图片淡出
            $imgs.eq(idx).fadeOut(600);
            // 信号量改变
            idx--;
            // 边界判定
            if (idx < 0) {
                idx = length - 1;
            }
            // 上一张图片淡入
            $imgs.eq(idx).fadeIn(600);
            // 当前小圆点加cur 它的兄弟去掉cur
            $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
            console.log(idx);  // 查看图片顺序
        }
    });
    // 小圆点事件 鼠标移入
    $circles.mouseenter(function(){
        // 之前图片消失 防流氓，立即切换
        $imgs.eq(idx).stop(true).fadeOut(600);
        // 改变信号量
        idx = $(this).index();
        // 当前图片出现 防流氓，立即切换
        $imgs.eq(idx).stop(true).fadeIn(600);
        // 当前小圆点加cur
        $(this).addClass("cur").siblings().removeClass("cur");
    });
</script>
相关文章
点击查看

本文标题:十四、animate()函数

文章作者:Mango

发布时间:2020年07月08日 - 22:19:15

最后更新:2020年07月08日 - 22:35:39

原始链接:https://mango185.github.io/post/f03ca4ff.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

-------------------本文结束 感谢您的阅读-------------------
欢迎光临
❤️
Mango小站
请多关照
❤️
❤️