使用jQuery实现fade动画完成后替换HTML，fadeOut回调不执行如何解决？

你的fadeOut回调函数实际已经正常执行，没有看到预期效果是两个问题共同导致的：

• fadeOut动画执行完成后，会自动给目标元素添加display: none样式，你替换完内容后没有触发显示逻辑，新内容一直处于隐藏状态，看起来就像回调没有执行。
• 回调函数内的$(this)指向的是被你执行淡出操作的原有p标签，你在赋值innerHTML的时候又套了一层p标签，会产生<p><p>新内容</p></p>的非法嵌套结构，不符合HTML规范。

你可以按照下面的逻辑调整：淡出原有内容 → 替换p标签内的文本 → 淡入显示新内容，完整可运行代码如下：

<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('article').click(function(){
    $(this).find('p').fadeOut(300, function(){
      // 直接修改当前p标签的内容，无需额外嵌套p标签
      $(this).html("Glad to see you!");
      // 内容替换完成后执行淡入，展示新内容
      $(this).fadeIn(300);
    });
  });
});
</script>
</head>
<body>
<article style="width: 200px; height: 150px; background-color: yellow;">
<p> Hello There </p>
</article>
</body>

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