javascript - jQuery:fadeOut() 与 html()，奇怪的行为

Question

在制作一个简单的随机报价机(我正在参加的编码类(class)的一部分)时，我在尝试淡出 HTML 中的一个元素时遇到了问题，然后应该在其中添加一些新的 HTML 并将其淡出中。这是代码:

  $(".quote-text").fadeOut(function() {
     $(this).html("<p>" + quotes[currentQuoteNum] + "</p>").fadeIn();
  });

quotes[currentQuoteNum] 只是指我拥有的报价字符串列表。由于某种原因，fadeIn 或 fadeOut 函数都无法正确设置动画。在用新报价更新我的 HTML 之前存在延迟，但动画未显示。现在，如果我像这样删除 p 元素:

$(".quote-text").fadeOut(function() {
    $(this).html(quotes[currentQuoteNum]).fadeIn();
});

然后它就起作用了，fadeIn 和 fadeOut 动画都会播放。我需要在那里有 p 元素，因为在它们内部我添加了另外两个元素，以使用特殊的样式类在我的引用周围创建引号。为了简单起见，我省略了这些。我知道还有其他方法，但我想知道为什么会发生这种情况。

显然这与向我的 HTML 添加标签有关，但我无法找出它是什么。请解释一下？

Answer 1

代码对我来说看起来很好，不应该是一个问题。 这是一个 codepen，它可以正常工作 Fade codepen

$(".quote-text").fadeOut(function() {
     $(this).html("<p>" + "Oh Good"+ "</p>").fadeIn();
  });

为什么不检查变量的内容。可能它的格式不正确