Dissolvenza incrociata tra classi CSS attraverso JQuery

[ldetomi]

Avevo usato Animate in realtà, ma poi l'ho abbandonato in favore della soluzione proposta, perché così ottenevo "più o meno" l'effetto visivo voluto.

Il problema di fondo è che così facendo devo agire direttamente sulle proprietà CSS e non sulle classi.

Insomma, io avrei un normale link grafico

che come si vede è vuoto. Il suo aspetto glielo dò con i CSS grazie ad un'immagine di sfondo, che tra l'altro viene traslata per mostrare lo stato ON del link, sempre grazie ai CSS:

.link_info_utili
{
  display:block;
  width:150px;
  height:30px;
  background:url('link_grafici_homepage.png');
  background-repeat:no-repeat;
  background-position: 0px 0px;
}

.link_info_utili:hover
{
  background-position: -150px 0px;
}

Tale codice funziona egregiamente in puro html e css, ma volevo fare in modo che la transizione fosse graduale e non istantanea.

Avete consigli su come ottenerla in JQuery (o JQueryUI)?