引言
jQuery特效效果是提升网页交互体验的核心组成部分。通过简洁的API,开发者能够快速实现复杂的DOM动画与视觉过渡,从而增强页面的动态表现力。本章作为jQuery特效效果的参考手册,旨在系统梳理从基础显示隐藏到高级自定义动画的所有方法,并提供各方法在1.0至4.0版本中的演变细节,以便开发者全面掌握并正确选用适合的特效工具。
show() 与 hide():基础显示隐藏
| 方法 | 功能说明 | 基本语法 | 版本变更记录 |
|---|---|---|---|
.show() | 显示匹配的元素。 | .show( [duration ] [, easing ] [, complete ] ) | 1.0 引入,无参数时仅恢复display属性。1.4.3 新增了对easing(缓动)的支持。 |
.hide() | 隐藏匹配的元素。 | .hide( [duration ] [, easing ] [, complete ] ) | 1.0 引入,无参数时立即隐藏。1.4.3 新增了对easing的支持。 |
.toggle() | 在显示与隐藏之间切换。 | .toggle( [duration ] [, easing ] [, complete ] ) | 1.0 引入,用于切换元素的可见性。1.4.3 新增了对easing的支持。 |
当不提供任何参数时,.show()和.hide()仅同步操作元素的display属性,不涉及动画。提供持续时间(如'slow'、'fast'或毫秒值)后,方法会同时控制元素的高宽、透明度与内边距,以平滑动画呈现。从jQuery 1.4.3开始,easing(缓动)函数参数生效,默认支持swing和linear两种效果。
fadeIn() 与 fadeOut():淡入淡出效果
| 方法 | 功能说明 | 基本语法 | 版本变更记录 |
|---|---|---|---|
.fadeIn() | 通过淡入方式显示隐藏的元素。 | .fadeIn( [duration ] [, easing ] [, complete ] ) | 1.0 引入。1.4.3 新增了对easing的支持。 |
.fadeOut() | 通过淡出方式隐藏元素。 | .fadeOut( [duration ] [, easing ] [, complete ] ) | 1.0 引入。1.4.3 新增了对easing的支持。 |
.fadeToggle() | 在淡入与淡出之间切换。 | .fadeToggle( [duration ] [, easing ] [, complete ] ) | 1.4.4 引入。 |
.fadeTo() | 调整元素的不透明度至指定值。 | .fadeTo( duration, opacity [, easing ] [, complete ] ) | 1.0 引入,接受持续时间与目标不透明度参数。1.4.3 新增了对easing的支持。 |
淡入淡出系列方法仅作用于元素的opacity属性,元素本身的尺寸不受影响。.fadeTo()方法与其他不同,它不依赖于元素的显示状态,强制将不透明度过渡至给定值(0到1之间)。在jQuery 4.0中,由于对现代浏览器的优化,这些方法的底层实现更为精简,但对外API保持一致。
slideDown() 与 slideUp():滑动效果
| 方法 | 功能说明 | 基本语法 | 版本变更记录 |
|---|---|---|---|
.slideDown() | 通过垂直滑动方式显示隐藏的元素。 | .slideDown( [duration ] [, easing ] [, complete ] ) | 1.0 引入。1.4.3 新增了对easing的支持。 |
.slideUp() | 通过垂直滑动方式隐藏元素。 | .slideUp( [duration ] [, easing ] [, complete ] ) | 1.0 引入。1.4.3 新增了对easing的支持。 |
.slideToggle() | 在滑动显示与滑动隐藏之间切换。 | .slideToggle( [duration ] [, easing ] [, complete ] ) | 1.4.4 引入。 |
滑动效果通过改变元素的高度来实现。在动画开始前,jQuery会记录元素的初始状态(如display、高度、内边距),动画结束后恢复合理值。这些方法同样从1.4.3版本起支持easing参数。
animate():自定义动画核心
.animate()方法是jQuery特效效果中最灵活的工具,允许开发者通过定义CSS属性集合来创建复杂动画。
| 参数 | 类型 | 说明 |
|---|---|---|
| properties | Object | 一组包含CSS属性与目标值的键值对。属性名需采用驼峰式(如marginLeft)。 |
| duration | Number/String | 动画执行时间,单位为毫秒或预定义字符串"slow"、"fast"。 |
| easing | String | 缓动函数名称,默认"swing"。 |
| complete | Function() | 动画完成时执行的回调函数。 |
| step | Function(now, fx) | 动画每一帧完成后调用的回调。 |
| queue | Boolean/String | 是否将动画放入队列中。若设为false,动画将立即执行。 |
| specialEasing | Object | 为properties中的特定属性指定缓动函数。 |
版本变更记录
- 1.0:
.animate()方法引入,支持基本的样式动画。 - 1.4:新增了对
step、queue、specialEasing等选项的支持,大幅增强了动画控制能力。 - 1.8:引入了
fx钩子(jQuery.fx.step)的优化,动画性能提升。 - 2.x:移除了对IE6-8的动画hack,精简代码。
- 3.0:使用
requestAnimationFrame技术以实现更流畅的动画与更好的电池寿命管理。 - 4.0:进一步清理了与旧版IE相关的动画代码,并移除已废弃的
jQuery.fx.interval(详见第9章)。动画属性值的计算在现代浏览器中更加精确。
示例
// 同时移动多个属性并在完成后执行回调
$("#box").animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 1200, "swing", function() {
// 动画完成后的操作
});动画队列与控制
jQuery特效效果默认采用队列机制,确保多个动画按顺序执行。这组方法用于管理执行队列和动画状态。
| 方法 | 功能说明 | 基本语法 | 版本变更记录 |
|---|---|---|---|
.queue() | 显示或操作匹配元素上待执行的函数队列。 | .queue( [queueName ] [, newQueue ] ) | 1.2 引入。 |
.dequeue() | 执行队列中的下一个函数。 | .dequeue( [queueName ] ) | 1.2 引入。 |
.clearQueue() | 清空尚未执行的所有队列项。 | .clearQueue( [queueName ] ) | 1.4 引入。 |
.stop() | 停止当前正在运行的动画。 | .stop( [clearQueue ] [, jumpToEnd ] ) | 1.2 引入,支持清空队列与跳至末尾参数。1.7 增加了对动画队列中stop()的改进。 |
.finish() | 停止当前动画,并立即完成队列中所有动画。 | .finish( [queueName ] ) | 1.9 引入。 |
.delay() | 设置一个延时,推迟队列中后续项目的执行。 | .delay( duration [, queueName ] ) | 1.4 引入。 |
.stop(true, true)会清空队列并让当前动画直接跳至最终状态,而.finish()则会强制所有队列中的动画立即完成。jQuery 4.0在移除旧浏览器支持后,这些控制方法的内部处理更加高效。
全局控制与配置
| 属性/方法 | 功能说明 | 版本变更记录 |
|---|---|---|
jQuery.fx.off | 全局禁用或启用所有动画。设为true时,所有动画方法将直接跳至最终状态(无过渡效果)。 | 1.3 引入。4.0 中仍保留,但内部实现简化。 |
jQuery.fx.interval | 设置动画的帧率(毫秒)。默认约为13毫秒。 | 1.4.3 引入。4.0 中已移除。现代浏览器应使用requestAnimationFrame,不再建议手动修改帧间隔。 |
在jQuery 4.0中,jQuery.fx.interval被移除,因为现代浏览器能更好地自动管理帧率,手动调整反而可能导致性能下降或动画不流畅。如果需要全局关闭动画,jQuery.fx.off依然是有效手段。
结语
jQuery特效效果体系从1.0版本的简单显隐,发展到4.0版本的精简与现代化,始终致力于简化Web动画的实现难度。掌握show、fade、slide等基础方法,并深入理解animate自定义动画与队列控制机制,开发者即可构建从基础交互到复杂场景的丰富动态页面。随着jQuery 4.0对旧版浏览器的彻底剥离,动画性能与代码体积均得到进一步优化,为现代Web开发提供了更高效的jQuery特效效果解决方案。本手册作为jQuery特效效果参考手册,应作为开发过程中随时查阅与比对的工具书,以确保代码既符合当前版本特性,又能精准实现设计意图。
