2021.12.10--jQuery--8.jQuery动画简介

8.1 jQuery简介

CSS3来实现动画有一定的局限，有些地方必须使用jQuery才能实现，例如：
（1）控制动画的执行
（2）结合DOM操作
（3）动画执行后返回一个函数

8.2 显示与隐藏

在jQuery中，如果想要实现元素的显示与隐藏，有以下2种方式。
（1）show()和hide()
（2）toggle()
toggle()方法来“切换”元素的显示状态。也就是说，如果元素是显示状态，则会隐藏起来；如果元素是隐藏状态，则会显示出来。

8.3 淡入与淡出

（1）fadeIn()和fadeOut()
fadeIn()方法来实现元素的淡入效果，可以使用fadeOut()方法来实现元素的淡出效果。一般情况下，fadeIn()和fadeOut()这两个方法都是配合一起使用的。
（2）fadeToggle()
fadeToggle()方法来“切换”元素的显示状态。也就是说，如果元素是显示状态，则会淡出；如果元素是隐藏状态，则会淡入。
（3）fadeTo()

8.4 滑上与滑下

在jQuery中，如果想要实现元素的滑动效果，我们有以下2种方式。
（1）slideUp()和slideDown()
使用slideUp()方法来实现元素的滑上效果，可以使用slideDown()方法来实现元素的滑下效果。一般情况下，slideUp()和slideDown()这两个方法都是配合一起使用的。
（2）slideToggle()
使用slideToggle()方法来“切换”元素的滑动状态。也就是说，如果元素是滑下状态，则会滑上；如果元素是滑上状态，则会滑下。

8.5 自定义动画

（1）简单动画
在jQuery中，对于自定义动画，我们都是使用animate()方法来实现的。
（2）累积动画
“width”: “+=100px”}表示以元素本身的width为基点加上100px，而{“width”: “-=100px”}表示以元素本身的width为基点减去100px。
（3）回调函数
css()方法并不会加入到“动画队列”中，而是立即被执行了。在jQuery中，如果想要在动画执行完成后再实现某些操作，我们就需要用到animate()方法中的回调函数。

8.6 队列动画

想要“先”改变宽度，“后”改变高度的话，这种方式就没办法实现了，而需要借助队列动画才可以实现。

$().animate().animate().…….animate()

执行完第一个animate()方法后，才会去执行第二个animate()方法。

8.7 停止动画

使用stop()方法来停止元素正在执行的动画效果

8.8 延迟动画

在jQuery中，我们可以使用delay()方法来延迟动画的执行。

$().delay(speed)

8.9 判断动画状态

使用is()方法来判断元素是否正处于动画状态。如果不处于动画状态，则添加新的动画；如果正处于动画状态，则不添加新的动画。

8.10 深入了解jQuery动画

jQuery动画其实就是通过将元素的CSS属性从“一个值”在一定时间内平滑地过渡到“另一个值”，从而实现动画效果。
对于3种动画形式，实现的原理如下。
（1）显示与隐藏：通过改变display、opacity、width、height来实现。
（2）淡入与淡出：通过改变display、opacity来实现。
（3）滑上与滑下：通过改变display、height来实现。
实际上，这三种动画形式本质上就是使用animate()方法来实现的，只不过jQuery把它们封装得更加简单而已。原来，原来……原来这一章学了那么多，本质上也就一个东西——animate()！