jQuery动画

今昭双子

于 2022-07-17 14:10:58 发布

阅读量646

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 动画

本文链接：https://blog.csdn.net/m0_57774967/article/details/125831360

本文详细介绍了jQuery中的动画效果，包括显示与隐藏、滑入滑出、淡入淡出和自定义动画。通过实例展示了show(), hide(), slideUp(), slideDown(), fadeOut(), fadeIn()等函数的使用，以及如何设置动画速度和回调函数。" 105592281,7688134,深入浅出poll源码解析,"['系统编程', '网络通信', 'Linux', '系统调用']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、jQuery显示与隐藏

show()和hide()都可以设置两个可选参数 speed和callback

语法:

$(selector).show(speed,callback)

参数1：speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值：“slow”，“fast”，“normal”

参数2：callback是在show或hide函数完成之后被执行的函数名称

例子：

html:

css:

jQuery：

点击第一个按钮“隐藏动画”，运用了函数递归，让图片从最后一张到第一张进行300毫秒的隐藏动画。

点击第二个按钮“显示动画”，运用了函数递归，让图片从第一张到最后一张进行300毫秒的显示动画。

二、jQuery滑入与滑出与切换

slideUp()和slideDown()和slideToggle()都可以设置两个可选参数 speed和callback

语法:

$(selector).slideUp(speed,callback)

$(selector).slideDown(speed,callback)

$(selector).slideToggle(speed,callback)

参数1：speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值：“slow”，“fast”，“normal”

参数2：callback是在slideUp或slideDown或slideToggle函数完成之后被执行的函数名称

例子：

html:

css:

jQuery:

点击第二个按钮“隐藏”，粉色盒子则进行2000毫秒滑入动画后弹出弹窗“滑入成功”。

点击第一个按钮“显示”，粉色盒子则进行2000毫秒滑出动画后弹出弹窗“滑出成功”。

点击第三个按钮“切换”，粉色盒子则进行2000毫秒滑入动画后弹出弹窗“切换成功”，再次点击第三个按钮“切换”，粉色盒子则进行2000毫秒滑出动画后弹出弹窗“切换成功”。

三、jQuery淡入与淡出与淡出给定的透明度

fadeIn()和fadeOut()都可以设置两个可选参数 speed和callback

fadeTo()设置三个可选参数 speed、opacity和callback

fadeTo()函数中的opacity参数规定减弱到给定的不透明度

语法:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

参数1：speed是动画执行时间，毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置这些值：“slow”，“fast”，“normal”

参数2：callback是在fadeIn或fadeOut函数完成之后被执行的函数名称。而opacity是在fadeTo规定减弱到给定的不透明度

参数3：callback是在fadeTo函数完成之后被执行的函数名称

例子：

html:

css:

jQuery：

点击第二个按钮“隐藏”，粉色盒子则进行2000毫秒淡出动画后弹出弹窗“淡出成功”。

点击第一个按钮“显示”，粉色盒子则进行2000毫秒淡入动画后弹出弹窗“淡入成功”。

点击第三个按钮“切换”，粉色盒子则进行2000毫秒淡出透明度为0.3。

四、jQuery自定义动画

animate自定义动画

语法:

$(selector).animate({params},{duration},{easing},{callback})

参数1：关键参数是params。它定义了产生动画的CSS属性，可以同时设置多个此类属性

参数2：duration它定义用来应用动画的时间。设置的值是是：毫秒值（比如1000），指动画在1000毫秒执行完成，也可以设置的值是：“slow”，“fast”，“normal”

参数3：easing执行效果，默认为swing（缓动），也可以是linear（匀速）

参数4：callback是在animate函数完成之后被执行的函数名称

例子：

html:

css:

jQuery：

这张图以3000毫秒它的宽度和高度变成为300px后，再以3000毫秒离浏览器网页窗口左500px移动，离浏览器网页窗口上50px移动和高度变成50px

函数	描述
$(selector).show()	显示被选元素
$(selector).hide()	隐藏被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画