主页/jQuery教程/参考手册/jQuery特效效果参考手册

jQuery特效效果参考手册

3,463字
15–22 分钟

引言

目录

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(缓动)函数参数生效,默认支持swinglinear两种效果。

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属性集合来创建复杂动画。

参数类型说明
propertiesObject一组包含CSS属性与目标值的键值对。属性名需采用驼峰式(如marginLeft)。
durationNumber/String动画执行时间,单位为毫秒或预定义字符串"slow""fast"
easingString缓动函数名称,默认"swing"
completeFunction()动画完成时执行的回调函数。
stepFunction(now, fx)动画每一帧完成后调用的回调。
queueBoolean/String是否将动画放入队列中。若设为false,动画将立即执行。
specialEasingObject为properties中的特定属性指定缓动函数。

版本变更记录

  • 1.0.animate() 方法引入,支持基本的样式动画。
  • 1.4:新增了对stepqueuespecialEasing等选项的支持,大幅增强了动画控制能力。
  • 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动画的实现难度。掌握showfadeslide等基础方法,并深入理解animate自定义动画与队列控制机制,开发者即可构建从基础交互到复杂场景的丰富动态页面。随着jQuery 4.0对旧版浏览器的彻底剥离,动画性能与代码体积均得到进一步优化,为现代Web开发提供了更高效的jQuery特效效果解决方案。本手册作为jQuery特效效果参考手册,应作为开发过程中随时查阅与比对的工具书,以确保代码既符合当前版本特性,又能精准实现设计意图。