首页 > 编程笔记 > JavaScript笔记 阅读：12

jQuery自定义动画详解（附带实例）

在 jQuery 中，要实现自定义动画效果，主要使用 animate() 方法创建自定义动画，使用 stop() 方法停止动画。

jQuery animate()创建自定义动画

animate() 方法的操作更加自由，可以随意控制元素的属性，实现更加绚丽的动画效果。jQuery 1.8 中加入了该方法。

animate() 方法的基本语法格式如下： 
animate(params, speed, callback)

【实例 1】将元素在页面中移动一圈。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。 
<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中，首先添加一个 <div> 标记，在 <div> 标记中放置一张图片。代码如下： 
<div id="fish"><img src="images/fish.jpg" /></div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，让图片先向右移动，再向下移动，最后返回原点。具体代码如下： 
<script type="text/javascript">
$(document).ready(function () {
    $("#fish")
        .animate({left: 300}, 1000)
        .animate({top: 200}, 1000)
        .animate({left: 0}, 200)
        .animate({top: 0}, 200);
});
</script>
注意，在使用 animate() 方法时，必须设置元素的定位属性 position 的值为 relative 或 absolute，元素才能动起来。如果没有明确定义元素的定位属性 position，并试图使用 animate() 方法移动元素，元素只会静止不动。

使用 animate() 方法还需要注意以下 2 点：

jQuery stop()停止动画

stop() 方法也属于自定义动画函数，它会停止匹配元素正在运行的动画，并立即运行动画队列中的下一个动画。jQuery 1.7 中加入了该方法。

stop() 方法的语法格式如下： 
stop(clearQueue, gotoEnd)

【实例 2】停止正在运行的动画，清空动画队列并直接到达动画结束时的状态。
前面 2 步和实例 1 相同，不再赘述。在引入 jQuery 库的代码下方编写 jQuery 代码，加入停止动画的代码。具体代码如下： 
<script type="text/javascript">
$(document).ready(function () {
    $("#fish")
        .animate({left: 300}, 1000)
        .animate({top: 200}, 1000)
        .animate({left: 0}, 200)
        .animate({top: 0}, 200);

    $("#btn").click(function () {
        $("#fish").stop(true, true);   // 停止动画
    });
});
</script>
注意，参数 gotoEnd 的值设置为 true 时，只能直接到达正在运行的动画结束时的状态，并不能到达动画队列所设置的动画结束时的状态。

jQuery判断元素是否处于动画状态

在使用 animate() 方法时，当用户快速在某个元素上执行 animate() 为元素添加新的动画时，就会出现动画累积。

解决这个问题的方法是判断元素是否处于动画状态，如果不处于动画状态，则为元素添加新的动画，否则不添加。具体代码如下： 
if (!$(element).is(":animated")) {   // 判断元素是否处于动画状态
    // 如果不处于动画状态，则为元素添加新的动画
}
判断元素是否处于动画状态的方法在使用 animate() 为元素添加新的动画中会经常使用，读者需要特别注意并掌握。

jQuery延迟动画的运行

在动画运行的过程中，我们经常会对动画进行延迟操作，这时就需要使用 delay() 方法。下面我们通过一个具体的实例来演示它的使用方法。

【实例 3】延迟运行动画。
前面 2 步和实例 1 相同，不再赘述。在引入 jQuery 库的代码下方编写 jQuery 代码，加入延迟动画运行的代码。具体代码如下： 
<script type="text/javascript">
$(document).ready(function () {
    $("#fish")
        .animate({left: 300}, 1000)
        .delay(300)
        .animate({top: 200}, 1000)
        .delay(1500)
        .animate({left: 0}, 200)
        .animate({top: 0}, 200);

    $("#btn").click(function () {
        $("#fish").stop(true, true);   // 延迟运行动画
    });
});
</script>
delay() 方法允许将队列中的动画延迟运行，它既可以用于延迟动画队列中动画的运行，也可以用于自定义队列。

jQuery finish()停止正在运行的动画

使用 finish() 方法可以停止当前正在运行的动画，并且删除所有其他的动画。

.finish() 方法和 .stop(true, true) 类似，.stop(true, true) 将清除动画队列，并且将目前的动画跳转到其最终值；而 .finish() 会导致所有排队的动画的 CSS 属性跳转到它们的最终值。finish() 方法是在 jQuery 1.9 中加入的。

具体代码如下： 
$(".container").click(function () {
    $("div").finish();
});

相关文章