jQuery中fx对象的step、tick等属性是什么？附示例代码

嘿，我来帮你把$.fx里的这些关键属性掰扯清楚，它们都是jQuery动画系统的核心组成部分：

• $.fx.step：这是一个钩子对象，用来定义自定义动画属性的处理逻辑。你可以给它添加自定义属性名对应的函数，当动画涉及到这个属性时，jQuery就会调用你定义的函数来处理每帧的更新。比如你想做一个自定义的滚动位置动画，就可以在这里注册专属处理函数。

  举个简单示例：

  $.fx.step.customScroll = function(fx) {
    $(fx.elem).scrollTop(fx.now);
  };
  

• $.fx.tick：这是动画帧的驱动函数，jQuery的动画循环会反复调用它来更新所有正在运行的动画实例。它负责计算每帧的动画进度、调用对应的step函数，还会管理动画的生命周期——比如动画结束时自动清理相关资源。

• $.fx.timer：这是一个数组，用来存储当前所有正在运行的动画定时器实例。每个定时器都关联着一组动画任务，tick函数会遍历这个数组来处理所有活跃的动画。当动画停止或完成时，对应的定时器会从这个数组中移除。

• $.fx.start：这是启动动画循环的触发函数。当第一个动画开始执行时，它会初始化动画定时器（优先用requestAnimationFrame，兼容环境下降级到setTimeout），让tick函数开始周期性执行。如果已经有动画在运行，它不会重复启动循环。

• $.fx.stop：这个函数用来停止所有当前运行的动画，同时清理timer数组里的所有定时器，直接终止动画循环。调用它之后，所有正在进行的动画都会立即停在当前状态。

• $.fx.speeds：这是一个速度配置对象，用来定义动画的预设速度值，比如slow、fast对应的毫秒数，默认配置是：

  {
    slow: 600,
    fast: 200,
    _default: 400 // 默认动画时长
  }
  

  你可以修改这个对象自定义全局动画速度，比如$.fx.speeds.slow = 1000，之后所有用slow作为速度参数的动画都会变成1秒时长。

另外你提到的这段代码：

for(fxProperties in $.fx){ document.write(fxProperties + ' ') }

它会遍历$.fx的所有可枚举属性并输出，除了上面说的这些，可能还会输出一些内部辅助属性（比如interval、off——后者用来全局禁用所有动画）。

内容的提问来源于stack exchange，提问作者hamidRezaHeidari