如何设置全局jQuery动画callback或event listener 无需为每个动画单独绑定回调

以下两种方案均无需修改现有动画调用代码，可实现全局监听所有jQuery动画的执行完成事件：

方案1：直接注入全局回调逻辑 #

通过覆写jQuery动画核心的完成钩子实现，适合只有一处全局监听逻辑的场景：

// 备份原始动画完成方法，避免破坏原有逻辑
const originalAnimationDone = jQuery.fx.prototype.done;
jQuery.fx.prototype.done = function () {
  // 先执行原始动画的内置完成逻辑
  originalAnimationDone.apply(this, arguments);
  
  // 在此处添加你要全局执行的代码
  // this.elem 为当前执行动画的DOM元素
  yourGlobalCallback(this.elem);
};

上述代码生效后，所有jQuery内置动画（slideToggle、fadeIn、animate等）执行完成时都会自动触发你的自定义回调。

方案2：自定义全局事件监听 #

如果需要灵活的绑定/解绑、多位置监听，可通过触发自定义事件实现：

// 注入全局事件触发逻辑
const originalAnimationDone = jQuery.fx.prototype.done;
jQuery.fx.prototype.done = function () {
  originalAnimationDone.apply(this, arguments);
  // 触发自定义全局事件，可传递动画元素、动画属性等参数
  $(document).trigger('jqueryAnimateComplete', [this.elem, this.props]);
};

// 绑定全局监听（可随时调用off方法取消监听）
$(document).on('jqueryAnimateComplete', function (event, animateElem, animateProps) {
  // 你的业务逻辑
  console.log('动画完成，目标元素：', animateElem, '动画属性：', animateProps);
});

可选优化 #

如果需要过滤特定动画或元素，可在回调中增加判断逻辑：

• 仅处理slide类高度动画：if (Object.keys(animateProps).includes('height'))
• 仅处理指定类名的元素：if ($(animateElem).hasClass('need-watch'))

如果同时需要监听CSS原生动画/过渡的完成，额外绑定以下事件即可：

$(document).on('animationend transitionend', function (e) {
  // CSS动画/过渡完成逻辑
});

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