jQuery fadeIn方法在按钮JS点击事件中不生效如何解决

• fadeIn 方法仅对处于隐藏状态的元素生效，你的目标#div默认是显示状态，直接调用方法不会触发动画
• 逻辑拆分混乱：你分别写了原生JS、jQuery两个独立的按钮点击监听，负责更新内容的final()函数从未被调用，更新内容和淡入动画两个操作完全没有配合
• 随机数生成逻辑有漏洞：Math.floor(Math.random() * 3)只会生成0、1、2三个值，永远无法命中case 3分支，不会返回"Three"结果

把更新内容、元素显隐控制、淡入动画的逻辑合并到同一个点击监听里，每次点击先隐藏元素、更新随机内容，再执行淡入动画，同时修正随机数生成范围，修复后完整代码如下：

function random() {
  // 乘4才能覆盖0-3的所有整数取值
  let number = Math.floor(Math.random() * 4);
  let result = ""

  switch(number) {
    case 0: 
      result = "Zero";
      break;
    case 1:
      result = "One";
      break;
    case 2:
      result = "Two";
      break;
    case 3:
      result = "Three";
      break;
  }
  return result; 
}

$(document).ready(function(){
  $("button").click(function(){
    $("#div")
      .hide()
      .html(random())
      .fadeIn('slow');
  });
});

补充说明：如果需要每次点击都重复触发淡入效果，必须每次执行动画前先把元素重置为隐藏状态，否则元素已经处于显示状态时，fadeIn不会产生任何动画效果。

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