jQuery: animare l'altezza di un elemento dall'alto in basso

Animare l'altezza di un elemento in jQuery è un procedimento che di solito funziona dal basso verso l'alto se si utilizza il metodo animate(). In questo esempio, invece, vogliamo creare un'animazione che vada dall'alto verso il basso. Possiamo riuscire nel nostro intento utilizzando una concatenazione di elementi vuoti e un timer JavaScript. Vediamo come.

Data la seguente marcatura

<div id="container">
	<div id="test"></div>
</div>

ed i seguenti stili CSS:

#container {
	margin: 2em auto;
	width: 500px;
	border-bottom: 1em solid #333;
}

#test {
	width: 200px;
	height: 200px;
	background: #d34545;
	cursor: pointer;
}

span.line {
	width: 200px;
	height: 1px;
	display: block;
	background: #fff;
}

creiamo un timer JavaScript che inserirà gli elementi vuoti con classe line in sequenza all'interno dell'elemento selezionato:

$('#test').click(function() {
  
    var $div = $(this);
    var height = $div.height();
    var index = 0;
    
    var timer = setInterval(function() {
    
      index++;
      
      if(index == parseInt(height / 2)) {
      
        clearInterval(timer);
      
      }
      
      $('<span class="line"/>').appendTo($div);
    
    
    }, 10);
      
});

Il timer ha un contatore interno (index) che viene incrementato ogni 10 millisecondi e che si fermerà solo quando avrà raggiunto un valore pari a metà dell'altezza dell'elemento.

Potete visionare l'esempio finale in questa pagina.