Possiamo creare l'effetto di un box che pulsa semplicemente animando le sue dimensioni e quelle dei contenuti al suo interno. Le dimensioni (comprese quelle del font in uso) vengono prima aumentate e poi diminuite ciclicamente. L'effetto ciclico รจ ottenibile con i timer JavaScript. Vediamo insieme i dettagli.
Abbiamo la seguente struttura HTML:
<div id="container">
<ul>
<li>A</li>
<li>B</li>
</ul>
</div>
Ed ecco il codice jQuery:
$(function() {
setTimeout(function() {
$('#container')
.animate({width: 400, height: 300}, 1000)
.find('ul')
.animate({width: 200, height: 100, marginLeft: -100, marginTop: -50}, 1000)
.end()
.find('li')
.animate({fontSize: '1.4em'}, 1000)
.parent().parent()
.animate({width: 500, height: 400}, 1000)
.find('ul')
.animate({width: 400, height: 200, marginLeft: -200, marginTop: -100}, 1000)
.find('li')
.animate({fontSize: '1em'}, 1000);
setTimeout(arguments.callee, 2000);
}, 1000);
});
Le dimensioni dell'elemento vengono prima aumentate insieme a quelle degli elementi al suo interno e quindi riportate al loro valore originale. La seconda chiamata a setTimeout()
fa entrare le animazioni in un ciclo infinito.
Potete visionare l'esempio finale in questa pagina.