jQuery: animare una tag cloud

Le animazioni jQuery non coinvolgono soltanto le dimensioni degli elementi e il loro posizionamento, ma anche la scalabilità dei loro font. Un tipico esempio è l'effetto che vogliamo ottenere su una tag cloud: quando l'utente passa con il mouse su un link, la sua dimensione del font viene incrementata, salvo poi tornare al valore iniziale quando il puntatore del mouse si allontana dal link. Vediamo come implementare questo effetto.

Abbiamo una tag cloud creata con una lista non ordinata:

<ul id="tag-cloud">
	<li class="tc-1"><a href="#">CSS</a></li>
	<li class="tc-2"><a href="#">HTML5</a></li>
	<li class="tc-2"><a href="#">JavaScript</a></li>
	<li class="tc-3"><a href="#">jQuery</a></li>
	<li class="tc-4"><a href="#">PHP</a></li>
	<li class="tc-5"><a href="#">Wordpress</a></li>
</ul>

Le voci della lista vengono trasformate quindi in elementi inline e a ciascuna classe CSS viene assegnata una diversa dimensione del font per il link corrispondente:

#tag-cloud {
	width: 18em;
	margin: 0;
	padding: 1em;
	line-height: 1.4;
	background: #f5f5f5;
	border-radius: 12px;
	box-shadow: 3px 3px 3px #ccc;
}

#tag-cloud li {
	margin: 0 0.5em;
	display: inline;
}

#tag-cloud li a {
	color: #d34545;
	text-decoration: none;
	font-weight: bold;
}

#tag-cloud li a:hover {
	color: #fff;
	background: #d34545;
	padding: 3px 5px;
	border-radius: 6px;
}

#tag-cloud li.tc-2 a {
	font-size: 1.2em;
}

#tag-cloud li.tc-3 a {
	font-size: 1.4em;
}

#tag-cloud li.tc-4 a {
	font-size: 1.6em;
}

#tag-cloud li.tc-5 a {
	font-size: 1.8em;
}

Con jQuery dobbiamo leggere il valore della proprietà font-size di ciascun link. Dato che il valore restituito dal metodo css() comprende anche l'unità di misura px, dobbiamo trasformarlo in un valore numerico intero usando il metodo JavaScript parseInt(). Quindi memorizziamo tale valore iniziale e lo usiamo come base per incrementare la dimensione del font. Quando l'utente allontana il mouse dal link, usiamo lo stesso valore per ripristinare la dimensione del font originale:

$(function() {

  $('li', '#tag-cloud').each(function() {

    var $li = $(this);
    var $a = $('a', $li);
    var fontSize = parseInt($a.css('fontSize'));

    $a.hover(function() {
    
      $a.stop(true, true).animate({
        fontSize: fontSize + 4 + 'px'
      }, 'slow', 'linear');
    
    
    }, function() {
    
      $a.stop(true, true).animate({
        fontSize: fontSize + 'px'
      }, 'slow', 'linear');
    
    
    });    
  
  });
  
});

In questo caso abbiamo scelto di usare un'animazione di tipo linear per il metodo animate() perchè offre risultati migliori. Potete visionare l'esempio finale in questa pagina.