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

Примеры, как сделать постепенный показ элементов с использованием стандартных функций анимации 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 есть функции с использованием пользовательских вызовов для сравнения...
1664
0
Печать HTML страниц
Очень часто разработчики забывают про печатную версию сайта, поэтому можно встретить такой результат на бумаге...
4418
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
7017
+10
Фиксированное горизонтальное меню с активными пунктами
Пример горизонтального меню для лэндингов, в котором реализовано...
4247
+2
Стилизация Checkbox
Несколько примеров как изменить внешний вид чекбоксов с помощью CSS, изображений и немного JS.
4596
+1
Как сделать табы на jQuery
Сделать табы на jQuery очень просто, сделаем HTML разметку и добавим к нему JS код...
8837
+3