jQuery 1.9.1源码分析系列（十五)之动画处理

简介

本文主要介绍jQuery中动画处理的实现方式，包括动画队列、动画的延迟处理、动画的方向控制、动画完成后的回调函数等。

动画队列

jQuery中的动画效果是基于浏览器的定时器机制实现的。当我们多次调用jQuery的动画效果时，这些动画会被依次添加到动画队列中，从而实现了动画的连续播放效果。

例如下面的代码中，我们将时长为2秒的动画A和时长为1秒的动画B依次添加到动画队列中：

$('#el').animate({left:'100px'}, 2000);
$('#el').animate({top:'50px'}, 1000);

这里我们使用了animate函数来实现动画效果。animate函数的第一个参数是CSS属性对象，表示动画结束时元素应该具有的CSS属性。第二个参数是动画时长。

动画的延迟处理

可以通过设置delay属性来实现动画的延迟效果。例如下面的代码中，我们实现一个延迟1秒后开始的动画效果：

$('#el').delay(1000).animate({left:'100px'}, 2000);

这里使用了delay函数来实现动画的延迟效果。delay函数的参数表示延迟时长，单位为毫秒。

动画的方向控制

通过设置direction属性可以实现动画的方向控制。例如下面的代码中，我们实现了往返播放的动画效果：

$('#el').animate({left:'100px'}, {duration:2000, direction:'alternate'});

这里通过direction属性来设置动画的方向为alternate，表示往返播放。

回调函数

在动画完成后，可以依靠回调函数来执行动画完成时的操作。例如下面的代码中，我们在动画完成后弹出一个提示框：

$('#el').animate({left:'100px'}, {
    duration: 2000, 
    complete: function() {
        alert('动画完成');
    }
});

这里使用了complete回调函数来实现动画完成后弹出提示框的效果。

示例说明

下面我们通过两个示例来进一步说明动画队列和动画的延迟效果。

示例1：动画队列

在这个示例中，我们将一个元素在不断重复的动画效果中移动到屏幕的右侧，然后再从屏幕的左侧回到原来的位置。示例的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画队列示例</title>
    <style>
        #ball {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 0;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="ball"></div>
    <script>
        function animateBall() {
            $('#ball').animate({left: '+=200px'}, 2000);
            $('#ball').animate({top: '+=100px'}, 1000);
            $('#ball').animate({left: '+=200px'}, 2000);
            $('#ball').animate({top: '+=100px'}, 1000, animateBall);
        }
        animateBall();
    </script>
</body>
</html>

在这段代码中，我们使用了一个animateBall函数来实现元素的动画效果。在animateBall函数中，我们用四个animate函数来描述元素的动画效果。由于最后一个animate函数的回调函数是animateBall函数本身，因此这个动画效果可以不断重复执行，从而实现一个不断移动的小球效果。

示例2：动画的延迟效果

在这个示例中，我们将一个元素移动到屏幕的右侧，然后再在2秒后回到原来的位置。示例的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画延迟示例</title>
    <style>
        #ball {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 100px;
            left: 0;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
    <div id="ball"></div>
    <script>
        $('#ball').animate({left: '+=200px'}, 2000)
                  .delay(2000)
                  .animate({left: '0'}, 2000);
    </script>
</body>
</html>

在这段代码中，我们在第一个animate函数后面使用了delay函数来设置动画的延迟效果。在第二个animate函数中，我们将元素移回到原来的位置。这里需要注意的是，在设置延迟时，我们只需要在第一个animate函数后面进行设置，而不需要在第二个animate函数前面进行设置。这是因为在动画队列中，第二个动画只有等待前面的动画执行完毕之后才会开始执行。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 1.9.1源码分析系列（十五)之动画处理 - Python技术站

jQuery 1.9.1源码分析系列（十五)之动画处理

jQuery 1.9.1源码分析系列（十五)之动画处理

简介

动画队列

动画的延迟处理

动画的方向控制

回调函数

示例说明

示例1：动画队列

示例2：动画的延迟效果

相关文章