jQuery动画（显示隐藏，淡入淡出，滑动）

Posted 2021-08-30 别Null.了

目录

分类

基本动画函数

显示元素

交替显示隐藏

滑动效果

向上收缩效果

向下展开效果

交替伸缩样式

淡入淡出效果

淡入效果

淡出效果

自定义不透明度

---

jQuery的动画函数

分类

基本动画函数：既有透明度渐变，又有滑动效果。是最常用的动画效果函数

滑动动画函数：仅使用滑动渐变效果

淡入淡出动画函数：仅使用透明度渐变效果

基本动画函数

显示元素

jQuery中用来显示已经被隐藏的元素的方法是使用 show(speed,[callback]) 函数，他的动画效果是向左上角缩小，并且元素本身逐渐变淡直至消失。

隐藏已经显示的元素的方法是使用 hide(speed,[callback]) 函数（参数与显示函数的参数含义相同）

函数名	show(speed,[callback])
作用	以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度
返回值	jQuery
参数	speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。 callback (Function)： 在动画完成时执行的函数，每个元素执行一次

交替显示隐藏

所谓交替显示隐藏，就是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。

jQuery中用于实现交替显示隐藏的函数是 toggle(speed,[callback]) 

函数名	toggle(speed,[callback])
作用	以优雅的动画切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
返回值	jQuery
参数	speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。 callback (Function)： 在动画完成时执行的函数，每个元素执行一次

滑动效果

向上收缩效果

向上收缩效果就是对页面元素通过高度变化（向上减小）来动态地隐藏。在jQuery中实现该效果的函数是 slideUp(speed,[callback])  。

函数名	slideUp(speed,[callback])
作用	通过高度变化来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
返回值	jQuery
参数	speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。 callback (Function)： 在动画完成时执行的函数，每个元素执行一次

向下展开效果

向上收缩用于元素的隐藏，向下展开则用于隐藏元素的显示。jQuery中用于实现向下滑动展开元素内容的函数为 slideDown(speed,[callback]) ​​​​​​​ 。

函数名	slideDown(speed,[callback])
作用	通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
返回值	jQuery
参数	speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。 callback (Function)： 在动画完成时执行的函数，每个元素执行一次

交替伸缩样式

交替伸缩样式和交替显示隐藏类似，都是当用户单击时，如果操作的页面元素是显示状态，则将其隐藏，如果其是隐藏的，则将其显示出来。只不过这里显示的动画效果是向上或者向下滑动。jQuery中处理交替伸缩样式的函数是 slideToggle(speed,[callback])  。

函数名	slideToggle(speed,[callback])
作用	通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数
返回值	jQuery
参数	speed(String,Number)：种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次

淡入淡出效果

淡入淡出效果我们在电影以及PowerPoint演示中经常见到，它是实现画面融入背景渐渐消失或者从纯色背景逐渐显示的效果。从实现上来讲就是控制画面本身的不透明度来实现其显示和隐藏效果。

淡入效果

淡入效果是指页面上元素的透明度不断减小，直到清晰显示出来的效果。在jQuery中实现淡入效果使用 fadeIn(speed,[callback]) 函数。

函数名	fadeIn(speed,[callback])
作用	通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数
返回值	jQuery
参数	speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次

淡出效果

淡出效果是指页面上元素的透明度不断增大，直到消失不见的效果。jQuery中处理淡出效果的是 fadeOut(speed,[callback]) 函数。

函数名	fadeOut(speed,[callback])
作用	通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数
返回值	jQuery
参数	speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。 callback (Function)：在动画完成时执行的函数，每个元素执行一次

自定义不透明度

fadeOut(speed,[callback])函数和fadeIn(speed,[callback])函数实现的最终结果要么是完全显示元素，要么是完全隐藏元素，不能够停留在中间的某个状态上。jQuery中专门有一个函数来设定最终结果为中间某个状态，换句话说就是设定最终的元素为半透明状态。它就是 fadeTo(speed,opacity,[callback]) 函数。

函数名	fadeTo(speed,opacity,[callback])
作用	把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数
返回值	jQuery
参数	speed(String,Number)：三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值（如1000）。 opacity (Number)：要调整到的不透明度值(0到1之间的数字)。 callback (Function)：（可选）在动画完成时执行的函数。