Un semplice menu animato con jquery

Tra le mille risorse di jquery ho trovato un semlicissimo menù con effetto rollover di entrata animata dello sfondo.
Si tratta di uno script leggerissimo e di facile personalizzazione.
L'esempio lo potete vedere in azione qui.
L'esempio è composto da tre file, un html in cui è scritto anche il CSS, l'elemento grafico png, e un jscript esterno.

Il menu è costruito con la classica lista modificata via CSS in cui ogni elemento viene trattato come blocco e definito quindi nelle sue dimensioni.
La particolarità di cui tener conto è l'impostazione dell'elemento gafico di sfondo del pulsante, al caricamento della pagina nascosto attraverso il posizionamento Y settato con un valore negativo leggermente superiore all'altezza dell'elemento grafico stesso.
Lo stato over prevede invece il posizionamento dell'elemento grafico di sfondo in modo visibile riportando Y a 0.
Fin qui avremo un semplice classico effetto roll over.
Inseriamo quindi una nuova regola CSS necessaria jquery per rilevare il punto di partenza della piccola animazione
ul#nav li a.js:hover

Per terminare la nostra sezione head includiamo jquery dalla libreria Ajax di Google e includiamo il js animate-bg.js  necessario all'animazione.

Ora non rimane che avviare la funzione jquery con i classico
$(document).ready(function()...