Item appearing in turn

Examples of how to make elements progressively appear using standard jQuery animation functions.

Layout:

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

Styles hide nested <div> s.

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

In JS, animation is applied to the first .shows div:eq(0) element. Once completed, the animation moves to the next element using the parent function reference arguments.callee.

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

Result:

24.10.2019, updated 25.02.2021
82

Comments

to add a comment.

Other publications

Refresh the page with JS / HTML / PHP
Collection of methods for reloading a page or browser tab.
305
0
Close browser tab using JavaScript
To close the current tab or browser window in JS, just call the method...
2119
0
How to make blocks of the same height
The easiest way to make blocks with the same height is using jQuery, for example, let's take the following block layout.
65
0