JS, появление и исчезание блоков, delay

273

19 мая 2017, 15:47

Мне нужно реализовать появление блоков через определенный промежуток (не одинаковый), при этом чтобы одновременно с появлением третьего блока пропадал первый, с появлением четвертого блока пропадал второй и т.д. Таким образом на экране одновременно должно быть только два блока. Я написал такой скрипт:

$(function(){
  $('#1').delay(1000).show(400);
  $('#2').delay(2000).show(400);
  $('#1').delay(3000).hide(400);
  $('#3').delay(3000).show(400);
  $('#2').delay(4000).hide(400);
  $('#4').delay(4000).show(400);
  $('#3').delay(5000).hide(400);
  $('#5').delay(5000).show(400);
});

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

Подскажите, в чём может быть проблема?

Answer 1

Кажется, вот такой код работает как нужно:

$(function() { 
  setTimeout(function() { 
    $('#1').show(400); 
  }, 1000); 
  setTimeout(function() { 
    $('#2').show(400); 
  }, 2000); 
  setTimeout(function() { 
    $('#3').show(400); 
  }, 3000); 
  setTimeout(function() { 
    $('#1').hide(400); 
    $('#4').show(400); 
  }, 4000); 
  setTimeout(function() { 
    $('#2').hide(400); 
    $('#5').show(400); 
  }, 5000); 
});

div { 
  display: none; 
  width: 100px; 
  padding: 10px; 
  margin: 10px; 
  border: 1px solid black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div id="1">Один</div> 
<div id="2">Два</div> 
<div id="3">Три</div> 
<div id="4">Четыре</div> 
<div id="5">Пять</div>

Создание интернет-магазина строительных материалов в ABCname

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

Все вопросы

ТОП-10

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

Проблема с $(document).on('click'…)

Шаблон подгружаются аяксомВ шаблоне таблица и есть кнопки <button type="button" class="btn btn-sm btn-icon btn-default">

278

jQuery

Нужен плагин или скрипт для мягкого скролла,чтобы корректно работала функция jquery

Привет всемПОсоветуйте плагин какой-нибудь или скрипт, чтобы смягчить скролл страницы во всех браузерах

386

jQuery

Wordpress плагин для внешних ссылок

Нужен плагин для работы с внешними ссылками, а именно при клике на внешнюю ссылку, чтобы всплывал pop-up с сообщением (сообщение должно редактироваться)Проблема...

319

jQuery

Как отключить выполнение одной функции jquery в IE

Доброго времени сутокЕсть файл main

325