Dissolvenza incrociata tra classi CSS attraverso JQuery

[ldetomi]

Ho un link grafico realizzato con un'immagine di sfondo che applico via CCS. All'onMouseOver vorrei attivare una seconda classe che di fatto "shifta" l'immagine di sfondo in modo da mostrare lo stato "ON" del link.

Via CSS è banale, ma tale effetto può avvenire solo in tempo reale. Volevo usare JQuery (e magari JQueryUI) per rendere tale transizione graduale.

Il seguente codice (per comodità, l'azione è sul "click"), mostra ciò che vorrei ma non è perfetto.

  $(document).ready(function()
  {
     $('.link_info_utili').bind('click',function()
     { 
        $('.link_info_utili').removeClass().addClass('prova',1000); 
     });
  });

Io vorrei che il passaggio da una classe all'altra fosse con una sorta di dissolvenza incrociata, e non come tale effetto in cui di fatto scompare il link (grazie al removeClass) e poi ricompare "srotolandosi dall'altro e diventando sempre più opaco" nello stato ON (grazie all'addClass)

Avete indicazioni da darmi?

[Xinod]

usa comunque animate, se per qualsivoglia ragione non riesci a definire (e quindi animare insieme) quali valori delle proprieta' css cambiano tra una classe ed un altra, includi anche jqueryui che permette appunto di effettuare animazioni tra classi css

[ldetomi]

Ho usato animate, e ho ottenuto un effetto "verosimile" con queste sequenze di azioni, in pratica rendo meno opaco l'oggetto, visualizzo l'altra porzione dello sfondo e riporto l'opacità al massimo.

$(document).ready(function()
{
  $('.link_info_utili').hover(function()
  {
    $('.link_info_utili').fadeTo(150,0.6)
                         .queue(function()
                         {
                           $('.link_info_utili').css({ backgroundPosition: '-150px 0' } ).dequeue();
                         })
                         .fadeTo(150,1.0);
  }, function()
  {
    $('.link_info_utili').fadeTo(150,0.6)
                         .queue(function()
                         {
                           $('.link_info_utili').css({ backgroundPosition: '0 0' } ).dequeue();
                         })
                         .fadeTo(150,1.0);
  });
});

Più o meno fa quello che vorrei ma lo trovo raffazzonato e poi se volessi usare delle classi invece che scrivere direttamente il css da modificare, come devo fare?

Possibile che non esista una sorta di "ToggleClass" che invece che "traslare" da una classe all'altra, esegue il passaggio con una dissolvenza? (tipo FadeTo)

[Xinod]

non hai usato animate
comunque ripeto che aggiungendo jqueryui e' possibile fare uno switch tra class diverse
http://docs.jquery.com/UI/Effects/ClassTransitions

ciao

[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)?

[ldetomi]

Nella guida di JQueryUI pubblicata da html.it ho visto che esiste il metodo switchClass() che "forse" fa al caso mio, ma non è specificato quali siano gli effetti di transizione che vengono supportati da tale metodo. Al momento ho trovato "linear" e "easeinquarter" ma a me servirebbe qualcosa tipo "fade" per creare l'effetto che ho spiegato sopra. Sapete dirmi quali sono tali effetti?