jQuery: box che pulsano

Short link

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.

L'autore

Gabriele Romanato, sviluppatore web full stack specializzato in siti, applicativi web ed e-commerce con Node.js e PHP.