jQuery .fadeOut 方法和在 DOM 加载后追加的元素

Question

（我参加新兵训练营已经 9 周了，所以我为这可能的基本性质道歉...）

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

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

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

我在后续函数中有这个：

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

我愿意：

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

...让它花式消失

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

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

Answer 1

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

优势：
硬件加速 (GPU)，即它不会打扰您的主处理器 (CPU) 执行此任务，而 jQuery 的 fadeOut() 功能基于软件，并且确实需要 CPU 资源来实现该效果。

步骤：

将 transition: opacity 1s 添加到所需按钮元素的 CSS 规则中
此处：( #clearHistoryButton )
添加 CSS 规则 与 button.fadeMeOut 与 opacity: 0
添加一个简单的jQuery函数在点击
然后用setTimeout(function(){$('#clearHistoryButton').remove()},1000)

删除按钮

运行代码片段

$(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>

jQuery .fadeOut 方法和在 DOM 加载后追加的元素

jQuery .fadeOut method on and element that is being appended after DOM load

javascript

jquery

animation

fadeout

effects