Плавная циклическая замена одного блока другим. Как сделать?

Question

[Евгений Журов]

Здравствуйте, прошу натолкнуть на мысль, как реализовать изложенное в вопросе. На странице есть несколько блоков с одним и тем же классом и разным контентом:

<div class="block">Content 1</div>
<div class="block">Content 2</div>
...
<div class="block">Content n</div>

Необходимо, чтобы на странице выводился только один блок - каждый по очереди, сначала первый, через 10 сек второй и т.д. Когда блоки заканчиваются, цикл возвращается к первому блоку и всё по новой. Причем вывод каждого следующего блока должен осуществляться плавно, как бы "проявляясь".
Логика у меня была такая, что весь массив этих блоков нужно прогнать через цикл, и одному блоку присваивается display:block, а остальным - display:none. Через 10 сек block присваивается второму, а none - первому и т.д. Так вот, прошу подсказать, как такую махинацию провернуть? На чистом JS или на jQuery - неважно. Не могу сообразить...

Answer 1

[Андрей]

https://jsfiddle.net/vefkcw9d/

Answer 2

[Юрий]

Можно так, например, https://jsfiddle.net/n20sbtw4/
Главное, чтобы высота родительского блока была задана, или, чтобы блоки имели абсолютное позиционирование, иначе контент под ними будет "скакать"