动画删除或多个div

Question

我有一个函数可以在单击按钮时从容器中删除div。这非常有效。问题是我希望div能够逐个删除它们，其间的延迟为.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>

Answer 2

这是怎么回事：

＆＃13;

＆＃13;

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

$("button").click(function() {
  var divs = $($('.mydiv').slice(-5).get().reverse()), // get the last 5 and reverse them so they are removed in the correct order
  		counter = 200;  // 200 miliseconds
      
  divs.each(function(i) {
    $(this).delay(counter * i).fadeOut(counter, function() { // if you don't want the fadeOut animation, you can change the fadeOut(counter to fadeOut(0,
        $(this).remove();
        $("span").text($('.mydiv').length);
    });
  });
});

＆＃13;

.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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

var timer = 0;
$("button").click(function() {
  $('.mydiv').slice(-5).each(function() {
    setTimeout(function() {
      $(this).remove();
    },timer);
    timer += 200;
  })
});

这将遍历每个div，并在删除之前设置超时。当它循环时，它会延迟200ms，使它们以200ms的间隔移除。

Answer 4

使用.hide()

中的remove和callback元素

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

$("button").click(function() {
  $('.mydiv').slice(-5).hide(500, function() {
    this.remove()
  });
  $("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.0/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>

Fiddle Demo

Answer 5

请更新您的js功能..

$(".mydiv").click(function() {
$(this).slice(-2).remove();
$("span").text($('.mydiv').length);
});