javascript - 动画删除或多个 div

Question

我有一个函数，可以在单击按钮时从容器中删除 div。这非常有效。问题是我希望 div 能够将它们一一删除，中间有 0.2 秒的延迟。目前，它们只是一次性全部删除。

<强> JSFiddle

$("button").click(function() {
  $('.mydiv').slice(-5).remove();
});

单击按钮时，上面的代码将删除 5 个具有 myDiv 类的 div。

Answer 1

使用setInterval()

var count = 0; // counter for counting
var int = setInterval(function() { // store reference in variable to clear interval
  if (++count == 5) // increment and check count
    clearInterval(int); // if count reached 5 clear the interval
  $('.mydiv').last() // get last element
       .remove(); // remove the last
}, 2000);

$("span").text($('.mydiv').length);

$("button").click(function() {
  var count = 0;
  var int = setInterval(function() {
    if (++count == 5)
      clearInterval(int);
    $('.mydiv').last().remove();
  }, 2000);
  $("span").text($('.mydiv').length);
});

.wrapper {
  border: solid thick red;
  margin: 10px auto;
  width: 300px
}
.mydiv {
  border: solid thin blue;
  margin: 2px;
  background: orange;
  width: 50px;
  height: 50px;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
  <div class="mydiv"></div>
</div>

<p>
  There are <span></span> items
</p>
<p>
  <button>Remove Items</button>
</p>