jQuery .fadeOut 方法和在 DOM 加载后附加的元素答案

【问题标题】：jQuery .fadeOut method on and element that is being appended after DOM loadjQuery .fadeOut 方法和在 DOM 加载后附加的元素
【发布时间】：2021-09-06 19:35:58
【问题描述】：

（我已经进入训练营 9 周了，所以我为这可能是初级的性质道歉......）

我在条件中将一个元素附加到 DOM（一个按钮）：

$('.buttonsAndInputs').append(`<button id="clearHistoryButton">Clear All</button>`);

单击此按钮时，它会运行一系列函数来清空数组并从 DOM 中清除一些其他内容。我想使用 jQuery 的 .fadeOut 方法来移除按钮。

我在后续函数中有这个：

$('#clearHistoryButton').remove();

我想：

$('#clearHistoryButton').fadeOut(1000);

...让它以一种奇特的方式消失。

它不起作用 - 它只是等待一秒钟然后 - POOF - 消失了。

这是我的第一个问题。这个社区对我在这个领域的成长至关重要，一如既往，我非常感谢你们所有人。

【问题讨论】：

作为新的贡献者，如果您认为答案解决了您的问题，请记得将答案标记为已接受的答案。这样，其他贡献者会看到您的问题已得到解决，并可以专注于其他未决的问题 - 谢谢
我没有在您的代码中看到它无法正常工作的原因。 jsfiddle.net/pe5wrt8q
我认为问题在于它是加载后附加的东西。我可以让硬编码的元素淡出。接受的答案起到了作用，但它确实影响了功能（此时让按钮返回完全超出了我的理解）。谢谢！

标签： javascript jquery animation fadeout effects

【解决方案1】：

您在 CSS 中尝试过transition: opacity 1s 吗？

优点：
硬件加速 (GPU)，即它不会打扰您的主处理器 (CPU) 执行此任务，而 jQuery 的 fadeOut() 函数是基于软件的并且确实会为此效果占用 CPU 资源。

步骤：

添加 transition: opacity 1s 到所需按钮元素的 CSS 规则
在这里：（#clearHistoryButton）
添加 CSS 规则 with button.fadeMeOut with opacity: 0
添加一个简单的jQuery函数在点击时添加“.fadeMeOut”类
然后删除按钮与setTimeout(function(){$('#clearHistoryButton').remove()},1000)

运行代码sn-p

$(function() { // Shorthand for $( document ).ready()

  $("#clearHistoryButton").on( "click", function() {
    // first: fade out the button with CSS
    $(this).addClass("fadeMeOut");

   // then: after fadeOut effect is complete, remove button from your DOM
    setTimeout(function(){
      $('#clearHistoryButton').remove();
    },1000);
  });
  
});

button {
  opacity: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}

button.fadeMeOut {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="clearHistoryButton">Press to hide me</button>

【讨论】：