Появление элементов по очереди

Примеры, как сделать постепенный показ элементов с использованием стандартных функций анимации JQuery.

Вёрстка:

<div class="shows">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
</div>
HTML

Стилями скрываются вложенные <div>.

.shows div {
	display: none;
	width: 100px;
	height: 100px;
	float: left;
}
CSS

В JS, к первому элементу .shows div:eq(0) применяется анимация. После завершения, анимация переходит к следующему элементу с использованием ссылки на функцию-родитель arguments.callee.

$('.shows div:eq(0)').show(300, function(){
	$(this).next().show(300, arguments.callee);
});
JS

Результат:

24.10.2019, обновлено 25.02.2021
5564

Комментарии 1

Сергей Антонов Сергей Антонов
1 ноября 2020 в 10:39
0
У меня не работает хотя сделал всё как тут

, чтобы добавить комментарий.

Другие публикации

Пример парсинга html-страницы на phpQuery
phpQuery – это удобный HTML парсер взявший за основу селекторы, фильтры и методы jQuery, которые позволяют...
17655
+7
Сортировка массивов
В продолжении темы работы с массивами поговорим о типичной задаче – их сортировке. Для ее выполнения в PHP существует множество функций, их подробное описание можно посмотреть на php.net, рассмотрим...
30000
+3
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
13598
+18
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
13956
+2
Сортировка массива по количеству символов
Помимо стандартных функций сортировки в PHP есть функции с использованием пользовательских вызовов для сравнения...
2204
0
Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
12436
+1