Почему не работает задержка при удалении элементов?

Question

Почему не работает задержка при удалении элементов? Они удаляются сразу все, а не по очереди.

var collection_img = document.getElementsByClassName('img');
var click__delete = document.getElementById('click__delete');
var j = 0;

function delayedAlert() {
  setTimeout(pause, 3000);
}

function pause() {
  if (collection_img[j].style.width == "0px") {
    collection_img[j].style.cssText = 'display: none;';
  }
  return j++;
}

function slidesOut() {
  var i;
  for (i = 0; i < collection_img.length; i++) {
    collection_img[i].style.cssText = ' width: 0px; transition: 1.5s;';
    delayedAlert();
  }
}
click__delete.onclick = slidesOut;

#wrp {
  width: 600px;
  height: 150px;
}

.img {
  float: left;
  display: block;
  overflow: hidden;
  width: 200px;
  height: 150px;
}

.img img {
  position: absolute;
  display: block;
  width: 200px;
  height: 150px;
}

<button id="click__delete">Удалить</button>
<div id="wrp">
  <div class="img">
    <img src="https://avtoforum71.ru/uploads/monthly_05_2008/post-6-1210617920_thumb.jpg">
  </div>
  <div class="img">
    <img src="https://deswal.ru/cars/dodge/200-150/00000061.jpg">
  </div>
  <div class="img">
    <img src="https://deswal.ru/cars/anteros/200-150/00000014.jpg">
  </div>
</div>

Answer 1

var img = document.getElementsByClassName('img');
var click__delete = document.getElementById('click__delete');
var j = 0;

function delayedAlert() { setTimeout(pause, 3000); }

function pause(){
	if (img[j].style.width == "0px") {
		img[j].style.cssText='display: none;';
	}
	return j++;
}

function slidesOut(){
	var i;
  (function next(n){
    if(n<0) {
    	pause();
    	return;
    }
    img[n].style.cssText=' width: 0px; transition: 1.5s;';
    setTimeout(next, 1500, --n);
  })(img.length - 1);
}

click__delete.onclick = slidesOut;

#wrp {
position: relative;
  width: 600px;
  height: 150px;
}

.img {
  float: left;
  display: block;
  overflow: hidden;
  width: 200px;
  height: 150px;
}

.img img {
  display: block;
  width: 200px;
  height: 150px;
}

<button id="click__delete">Удалить</button>
<div id="wrp">
  <div class="img">
    <img src="https://avtoforum71.ru/uploads/monthly_05_2008/post-6-1210617920_thumb.jpg">
  </div>
  <div class="img">
    <img src="https://deswal.ru/cars/dodge/200-150/00000061.jpg">
  </div>
  <div class="img">
    <img src="https://deswal.ru/cars/anteros/200-150/00000014.jpg">
  </div>
</div>

БЛОГ НА HUSL

Почему не работает задержка при удалении элементов?

Ответы (1 шт):