Как каждые 5 секунд удалять добавлять блок?

Question

[Evgeniy]

Добрый день.
У меня есть 3 блока стоящие друг за другом с помощью position.
Хочу сделать так чтобы каждые 5 секунд уходил плавно один блок, но не получается. Пробывал через .animatе
Логика такая:
Есть 3 блока
Прошло 5 сек - ушел первый блок
Прошло 5 сек - ушел второй блок
Прошло 5 сек - ушел третий блок и появился первый
Повтор

Как это сделать уже не знаю. Использовал .hide и .show, все равно не помогает.

Answer 1

[Dmitry Bay]

Почему не ищете библиотеки? гугл сразу показывает же.
https://www.jssor.com/slideshow/x-fade.html

Логика у вас довольно простая,
1) у всех слайдов по дефолту z-index 0
2) у основного слайда ставим z-index 1
3) отображаем с z-index 0 следующий слайд (display: block)
4) через fadeout скрывает верхний слайд, на колбэк заменяем z-index на единицу у него.
5) проверяем через next() если ли следующий слайд, если нет, используем первый .
6) повторяем шаг 3.


jquery.page2page.ru/index.php5/%D0%9F%D0%BE%D1%8F%...

Answer 2

[ma4t]

Вам нужно задавать интервалы
Подробнее тут https://learn.javascript.ru/settimeout-setinterval
А именно использовать правильно setInterval

Answer 3

[hzzzzl]

https://codepen.io/anon/pen/VRomam

upd
или типа слайдера на одном месте чтобы были все дивы, я не понял "стоящие друг за другом с помощью position"
https://codepen.io/anon/pen/PLMbWQ

Answer 4

[Артем Кондрацкий]

Можно использовать библиотеку TweenMax, ей очень легко пользоваться и она легко изучается, всего за 5 минут.