9. 实现动画的方法

9. 实现动画的方法

jQuery 提供了很多实现动画效果的方法，比如：

• show
• hide
• toggle
• slideDown
• slideUp
• slideToggle
• fadeIn
• fadeOut
• fadeTo
• fadeToggle
• animate
• stop
• delay
• finish

show、hide、toggle

show 方法是将一个隐藏的元素，从小到大显示出来的效果。

hide 方法是将一个显示出来的元素，从大到小隐藏的效果。

toggle 方法是在显示和隐藏之间进行切换，效果就是从小到大或从大到小。

$("#demo").show(500);
$("#demo").hide(500);
$("#demo").toggle(500);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pf2DlN2Q-1609290396019)(media/15298971273129/15402548055490.gif)]

第 1 个参数表示动画播放的事件。也可以用系统定义的三种值来表示：“fast”,“normal”,“slow”。

第 2 个参数表示动画播放完成后执行的回调函数。

slideDown、slideUp、slideToggle

slideDown 方法是将一个隐藏的元素，从上到下显示出来的效果。

slideUp 方法是将一个显示出来的元素，从下到上隐藏的效果。

slideToggle 方法是在显示和隐藏之间进行切换，效果就是从上往下或从下往上。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3hSpGvwD-1609290396022)(media/15298971273129/15402548243072.gif)]

参数和之前一样。

fadeIn、fadeOut、fadeTo、fadeToggle

fadeIn 方法是将一个隐藏的元素，淡入的效果。

fadeOut 方法是将一个显示出来的元素，淡出的效果。

fadeTo 方法是到达指定透明度的效果。

fadeToggle 方法是在显示和隐藏之间进行切换，效果淡入或淡出。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JQbTQ7bM-1609290396024)(media/15298971273129/15402547376572.gif)]

参数和之前一样。

animate

以上的方法实现了显示和隐藏的动画效果。不过，动画不仅限于显示或隐藏，比如节点的移动、放大缩小。这些动画效果可以用animate来实现。

animate 各种节点的动画效果，包括显示或隐藏，看看它的用法：

$("#demo").animate({
    width:150,
    height:150,
    marginLeft:100
},500,function(){
    console.log("动画播放完毕");
});

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oaHaXR1J-1609290396026)(media/15298971273129/15402548482207.gif)]

animate有 3 个参数：

参数 1：指定动画完成后的最终值，可以同时有多个，它们的动画会同时进行。如果值的单位是 px，可以省略 px。

参数 2：动画持续的时长。

参数 3：动画完成后执行的回调。

注意：参数 1 是一个 JSON 对象，其中的属性只能是以数字为值的样式，比如 width、height 等等。像 color、font-style 这类的样式是不能做动画的。

animate 本身是一个异步方法，也就是说，它不会阻塞后面代码的执行。但是，假如多个 animate 同时执行，会不会导致动画混乱呢？

关于这个问题，你不用担心。我们之前讲 JS 的异步操作时提到过，JS 的异步实际上是单线程非阻塞式的。也就是说，每个 animate 执行后，动画的执行都会放到队列中排队。当其他代码执行完后，才轮到队里中的动画执行，并且一次只会执行一个动画，其他动画都会排队等待。看这个例子：

$("#demo").animate({
    width:150,
    height:150,
    marginLeft:100
},500);
$("#demo").animate({
    width:100,
    height:100,
    marginTop:100
},500);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LVYDFIRn-1609290396029)(media/15298971273129/15402548820387.gif)]

例子中执行了两次 animate，并且作用在同一个标签上。从效果上可以看出，它们并没有同时执行，而是先执行了 div 放大到 150 像素，向右移动 100 像素的动画。然后再缩小到 100 像素，往下移动 100 像素。这就说明了多个动画会依次排队执行的情况。

停止动画

jQuery 提供了 2 个方法实现停止动画：stop 和 finish。其中 stop 有 2 个参数，都是布尔值，又可以分 4 种情况。所以，停止动画实际上有 5 种情况：

1. finish

停止动画，并清空队列，直接显示动画的最终状态。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XMAemIRn-1609290396030)(media/15298971273129/15402547764447.gif)]

2. stop(true,true)

停止当前动画，清空队列，显示当前动画的最终状态。
注意它和 finish 的区别在于它只会来到当前动画的最终状态，finish 是来到所有动画的最终状态。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZrGml1cC-1609290396031)(media/15298971273129/15402550332890.gif)]

3. stop(true,false)

停止当前动画，清空队列，不显示当前动画的最终状态。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-01lhzsff-1609290396032)(media/15298971273129/15402549982704.gif)]

4. stop(false,true)

停止当前动画，不清空队列，显示当前动画的最终状态

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XSqZX8M5-1609290396032)(media/15298971273129/15402549780061.gif)]

5. stop(false,false)

停止当前动画，不清空队列，不显示当前动画的最终状态

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-exFqWTm5-1609290396033)(media/15298971273129/15402549605900.gif)]

delay

用来在多个动画之间插入延迟时间：如

$("#demo").animate({
    width:150,
    height:150,
    marginLeft:100
},1500,function(){
    console.log("动画播放完毕");
})
.delay(1000)
.animate({
    width:100,
    height:100,
    marginTop:100
},1500,function(){
    console.log("动画播放完毕");
});

注意，该方法是将队列中的两次动画间加入延迟，可以用在 animate 以及前面介绍的那几个显示和隐藏的动画中。但它并不能完全代替 setTimeout。

方法的更多具体细节请参看 API 文档。