Question

我可以动态创建许多X盒，因为我可以添加和删除任意数量的X盒。创建框时，我添加了一个小动画（“ .show（'250'）”），现在，当框被删除时，我想做同样的事情。

for (let i = 0; i < boxes_to_remove;i++) {
  $('[id^=box_]:last-child').remove();
}

这工作正常，但是我想将相同的动画（嗯，fadeOut ...）添加到先前的代码中，但是不起作用。到目前为止，我已经尝试过：

  $('[id^=box_]:last-child')
    .fadeOut('slow', function() {
      $(this).remove();
    })

和

  $('[id^=box_]:last-child')
    .animate({height: 0}, 250,"linear",function() {
            $(this).remove();
    })

^这只会删除最后一个。我是否想要动画，但是如果我通过“删除4个框”，只会删除最后一个。

  $('[id^=box_]:last-child')
    .fadeOut("250")
    .remove();

^这是相反的。如果要删除4个框，它将删除4个框，但没有动画。

TL; DR：我想应用动画，然后在for循环中删除元素X次。

Answer 1

由于运行循环时，尚未删除任何元素，因此:last_child始终指向同一元素。您必须以伪递归方式运行它，以便在删除上一个:last_child之后确定下一个{}：

function remove(n) {
  $('[id^=box_]:last-child')
    .fadeOut("250", function() {
      $(this).remove();
      if (n > 1) remove(n - 1);
    });
}
remove(3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="box_1">1</div>
  <div id="box_2">2</div>
  <div id="box_3">3</div>
  <div id="box_4">4</div>
  <div id="box_5">5</div>
  <div id="box_6">6</div>
</div>

for循环中的动画后删除多个元素

1 个答案: