在 animation() 中删除不删除

Question

我有一个 div id'ed #scenario，它有许多 <p> 元素作为子元素。我想要一个函数，可以以相反的顺序将它们一个一个地淡出，然后从 DOM 中删除它们。我正在使用 jQuery.

我的代码：

function fadeAndDelete() {
  var elements = $("#scenario").children().get().reverse();
  $.each(
    elements, function(index, element) {
      element.animate(
        {'color': 'rgba(0, 0, 0, 0)'}, 1000, function() {
          $(this).remove();
        }
      );
    }
  )
};

我也尝试使用 element.remove() 和 $(element).remove()，其中 none 有效。

加分：在理想情况下，元素的移除之间会有一个时间间隔（就像在每个（）周期之间使用 sleep（）函数一样）。

Answer 1

您使用的 animate() 是 DOM 动画，而不是 jquery 的：

https://developer.mozilla.org/en-US/docs/Web/API/Element/animate

animate(keyframes, options)

这个函数没有回调参数，所以不是.remove()不行，而是这个函数从来没有被调用过

要使用 jquery 的 animate，您需要一个 jquery 对象：

$.each(elements, function(index, element) {
      $(element).animate(...

但是，请注意 jquery 因无法在没有额外插件或使用 css 的情况下设置动画颜色而臭名昭著，因此您的代码将不会设置动画，但 .remove() 会被调用。

对于一次一个的场景，可以使用setTimeout。 SO 上有很多现有答案，但这是您的代码：

function fadeAndDelete() {
  var elements = $("#scenario").children().get().reverse();

  $.each(elements, function(index, element) {
    setTimeout(function() { 
      $(element).fadeOut(2000, function() { 
        this.remove(); 
      }); 
    }, index*500);
  });
};

fadeAndDelete();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=scenario>
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

在 animation() 中删除不删除

Remove in animation() doesn't remove

javascript

jquery

css-animations

jquery-animate