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

Примеры, как сделать постепенный показ элементов с использованием стандартных функций анимации 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

Комментарии

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

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

Сортировка массива по количеству символов
Помимо стандартных функций сортировки в PHP есть функции с использованием пользовательских вызовов для сравнения...
20.09.2018
1157
0
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
1763
+6
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
19.12.2018
2592
+2
Как сделать табы на jQuery
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
08.02.2018
5662
+1
Перебор ячеек таблицы jQuery
Обойти ячейки таблицы можно с помощью jQuery метода each, например следующий код выводит текст из всех ячеек в консоль.
03.04.2019
5097
0
Сортировка массивов
В продолжении темы работы с массивами поговорим о типичной задаче – их сортировке. Для ее выполнения в PHP существует множество функций, их подробное описание можно посмотреть на php.net, рассмотрим...
17.11.2017
16143
+1