Как переставлять каждый считанный контент на место предыдущего так, чтобы каждая перестановка происходила с 5-секундной задержкой исполнения

Question

Нужно переставлять каждый считанный контент на место предыдущего так, чтобы каждая перестановка происходила с 5-секундной задержкой исполнения. После исчерпания блоков контента нужно остановить выполнения скрипта. Всего блоков 4:

<div id="div1"></div>                                                                                                                                   
<div id="div2"></div>
<div id="div3"></div>                                                                        
<div id="div4"></div>

Помогите пожалуйста , я новичек, а задание срочное, могу расчитывать только на вашу помощь, заранее спасибо!

Answer 1

$(function() {
    let $replacedItems = $('.replaced'),
        itemsLength = $replacedItems.length,
      i = 0;
      
  replaceElement();
      
  function replaceElement() {
    if (i < itemsLength - 1) {
        let $replacedItemsNew = $('.replaced');
      
      setTimeout(function() {            
        $replacedItemsNew.eq(i).before($replacedItemsNew.eq(i).next());
        
        i++;
        
        replaceElement();
      }, 5000);
    } else {
        console.log('Перестановка завершена');
    }
  }
});

.row {
  display: flex;
}

.replaced {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-size: 40px;
}

.replaced + .replaced {
  margin-left: 5px;
}

.replaced-1 {
  background-color: red;
}

.replaced-2 {
  background-color: green;
}

.replaced-3 {
  background-color: blue;
}

.replaced-4 {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="row">
  <div class="replaced replaced-1">1</div>
  <div class="replaced replaced-2">2</div>
  <div class="replaced replaced-3">3</div>
  <div class="replaced replaced-4">4</div>
</div>

БЛОГ НА HUSL

Как переставлять каждый считанный контент на место предыдущего так, чтобы каждая перестановка происходила с 5-секундной задержкой исполнения

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