Electronics with jQuery and CSS

My smart father is an electronics expert, having studied
electonics on his own for so many years now. Yesterday he came up with a challenge to me. He basically asked me to draw a simple schematic with CSS to be
animated with JavaScript. So he sketched something on his notebook and I took a look at it. Actually, I don't know what it was, but this maorning I managed
to reproduce it using CSS and jQuery. If you know what it is, please let me know because I'm a total ignorant in this field. lol

The first thing to do is using CSS and HTML to draw the schematic. In this case, we have the following HTML structure:

<div id="container">
	<div id="line"></div>
    <div id="block"></div>
	<div id="line2">
		<div class="block"><div class="inner"></div></div>

		<div class="block"><div class="inner"></div></div>

		<div class="block"><div class="inner"></div></div>
	</div>
</div>

So we have a square in the center, a thick line on the left and some sequential squares on the right. This is the CSS instead:

#container {
	width: 600px;
	height: 100px;
	position: relative;
	margin: 2em auto;
}

#block {
	width: 100px;
	height: 100px;
	background: black;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -50px;
}

#line {
	width: 250px;
	height: 2px;
	background: black;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -1px;
	display: none;
}

#line2 {
	width: 250px;
	height: 50px;
	position: absolute;
	right: 0;
	top: 0;
}

div.block {
	width: 80px;
	height: 50px;
	position: relative;
	border-bottom: 2px solid black;
	float: left;
	display: none;
}

div.inner {
	width: 50px;
	height: 50px;
	border: 2px solid black;
	border-bottom: none;
	margin: 0 auto;
	background: white;
}

Finally, we can add jQuery:

$(document).ready(function() {

    window.setTimeout(function() {

	    $('#container #line').fadeIn('slow', function() {

		    $('#container #line2').fadeIn('slow', function() {

			    $(this).find('div:first').fadeIn('slow', function() {

				  $(this).next().fadeIn('slow', function() {

				      $(this).next().fadeIn('slow', function() {

					      $(this).next().fadeIn('slow');

					  });

				  });

				});

			});

		});

	}, 1000);

});

You can see the demo below.

Demo

Live demo

Comments are closed.