jQuery fadeIn/Out问题：动画期间触发操作时避免元素同时显示

API 探路者

2026-7-25

解决方案

问题根源在于：当正在执行fadeIn()的元素被无参数stop()终止时，元素会停留在当前的半透明显示状态，后续的fadeOut()需要时间完成，而目标元素的淡入如果没有等待兄弟元素完全隐藏，就会出现短暂的同时显示。

修复方案一：强制重置所有元素状态后淡入目标

这种方式最直接，不管当前动画状态如何，先统一重置所有内容元素的状态，再执行目标元素的淡入：

$("#buttons a").on('click', function() {
  const targetId = $(this).attr('data-div');
  const targetDiv = $(`#${targetId}`);
  
  // 停止所有内容div的动画，清空队列，直接跳转到最终状态并隐藏
  $('#my-component div').stop(true, true).hide();
  
  // 给目标元素添加active类并执行淡入动画
  targetDiv.addClass('active').fadeIn(800);
});

关键说明：

stop(true, true)：第一个true清空元素的动画队列，避免之前未完成的动画干扰后续操作；第二个true让元素直接跳转到当前动画的最终状态（比如正在淡入的元素会立刻变为完全显示，正在淡出的会立刻隐藏）。
后续的hide()确保所有非目标元素都处于隐藏状态，彻底避免重叠。

修复方案二：等待兄弟元素完全淡出后再淡入目标

如果你希望保留兄弟元素的淡出动画效果，可以修改为以下代码，确保目标元素的淡入在所有兄弟元素完全隐藏后才开始：

$("#buttons a").on('click', function() {
  const div = `#${$(this).attr('data-div')}`;
  
  // 停止兄弟元素的所有动画，清空队列，跳转到最终状态后执行淡出
  $(div).siblings().stop(true, true).fadeOut().promise().done(() => {
    // 先确保目标元素处于隐藏状态，再执行淡入
    $(div).addClass('active').hide().fadeIn(800);
  });
});