jQuery: simulazione di un'onda quadra

Nella realizzazione di un demo che riproduce la simulazione di un'onda quadra con jQuery, la parte più difficile è sicuramente l'implementazione del layout CSS. jQuery infatti si limita a visualizzare gli elementi con un effetto di assolvenza. Vediamone insieme i dettagli.

Il nostro schema è diviso in tre parti: a sinistra la tensione continua (DC), al centro il circuito elettronico, a destra l'onda quadra risultante. L'onda quadra sarà divisa in più segmenti. Ecco la marcatura che utilizzeremo:

<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 class="arrow">&rarr;</div>
</div>

I nostri stili CSS utilizzeranno il posizionamento contestuale per la visualizzazione degli elementi:

#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;
}

div.arrow {
	position: absolute;
	bottom: -0.4em;
	left: 0;
	font-size: 4em;
}

Come abbiamo detto poc'anzi, jQuery si limiterà a far apparire gli elementi in sequenza:

$(document).ready(function() {

    setTimeout(function() {
	
	    $('#line', '#container').fadeIn('slow', function() {
		
		    $('#line2', '#container').fadeIn('slow', function() {
			
			
			    $(this).find('div:first').fadeIn(1000, function() {
				
				
				  $(this).next().fadeIn(1000, function() {
				  
				      $(this).next().fadeIn(1000, function() {
					  
					  
					      $(this).next().fadeIn(1000);
					  
					  });
				  
				  
				  });
				
				
				});
			
			});
		
		
		});
	
	}, 1000);

});

Potete visionare l'esempio finale in questa pagina.