Замена блоков друг другом

347

07 июля 2017, 08:06

Есть два ряда по 3 блока:

<div class="container">
 <div class="row1">
   <div class="block1>1</div>
   <div class="block2>2</div>
   <div class="block3">3</div>
</div>
<div class="row2">
   <div class="block4">4</div>
   <div class="block5">5</div>
   <div class="block6">6</div>
</div>
</div>

Изначально, row2 скрыт. Нужно, чтобы эти ряды через время подменяли друг друга. Т.е. сначала показывается row1, через 5 сек row1 исчезает и его заменяет row2. Потом row2 исчезает через 5 сек и его заменяет row1
И так нужно чтобы повторялось в цикле(бесконечно).
Как это проделать на JS / jQuery?

Answer 1

setInterval(function() { 
  $('.row1, .row2').toggle(); 
}, 3000);

.row2 { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="row1"> 
    <div class="block1">1</div> 
    <div class="block2">2</div> 
    <div class="block3">3</div> 
  </div> 
  <div class="row2"> 
    <div class="block4">4</div> 
    <div class="block5">5</div> 
    <div class="block6">6</div> 
  </div> 
</div>

Answer 2

setInterval(function() { 
  $(".row1, .row2").toggle(); 
}, 5000);

.row2 { 
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="row1"> 
    <div class="block1">1</div> 
    <div class="block2">2</div> 
    <div class="block3">3</div> 
  </div> 
  <div class="row2"> 
    <div class="block4">4</div> 
    <div class="block5">5</div> 
    <div class="block6">6</div> 
  </div> 
</div>

Answer 3

Время смотрите сами

while (true) { 
  setTimeout(function() { 
    $('.row1').fadeOut('fast'); 
  }, 1000); 
  $(window).load(function() { 
    setTimeout(function() { 
      $(".row2").show('fadeIn', {}, 500) 
    }, 2000); 
  }); 
  setTimeout(function() { 
    $('.row2').fadeOut('fast'); 
  }, 3000); 
  $(window).load(function() { 
    setTimeout(function() { 
      $(".row1").show('fadeIn', {}, 500) 
    }, 4000); 
  }); 
}

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

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Возврат значения по URL из AJAX

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

284

javascript

Неправильно работает событие onclick

Добрый день, при нажатии на кнопку onclick='audioRecorderopen(this) спрашивает разрешение на микрофон и при нажатии на разрешить запись сразу стартует,...

364

javascript

this в unit тестах jasmine

Как в тестах Jasmine подменить созданному объекту другой this?

261

javascript

jQuery AJAX запись в константу [требует правки]

Как после выполнения ajax, записать данные в константу и все это выполнить до функции ajaxStop?

318