jQuery: bg position in menu con immagini

[ve]

jQuery: bg position in menu con immagini

Buongiorno a tutti,
"abuso" nuovamente della vostra pazienza e gentilezza per porvi un quesito:

sto utilizzando, per un progetto al quale sto lavorando, il plugin di jQuery "background position", applicato ad un menu con solo immagini. In sostanza sto cercando di riprodurre un effetto simile a quello del menu di questo sito:
1md.be

Mi sono affidata all'esempio che si trova su snook.ca, (non so se lo conoscete), che ho utilizzato anche altre volte e con cui mi sono trovata bene. L'unico problema è che ho sempre utilizzato menu testuali o, comunque, menu in cui non dovesse cambiare il colore della voce selezionata (oltre allo sfondo).

Ora, il mio problema è che riesco a riprodurre l'effetto sua una voce di menu, ma applicandolo alle altre non funziona più niente (nella mia ingenuità pensa vo che bastasse copiare la funzione e associarla all'id di riferimento per ogni voce -.-').

questo è lo script associato all'id della prima voce:

$(function(){

    $('#home a')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
            $(this).stop().animate({backgroundPosition:"(-80px 0)"}, {duration:300})
        })
        .mouseout(function(){
            $(this).stop().animate({backgroundPosition:"(-250px 0)"}, {duration:200, complete:function(){
                $(this).css({backgroundPosition: "0 0"})
            }})
        })
    
});

questo è lo script vero e proprio

(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
            }
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
    });
})(jQuery);

Qualcuno potrebbe illuminarmi, per favore?

Come sempre vi ringrazio in anticipo!

[ve]

Potete chiudere, ho risolto grazie lo stesso!

[ayrton2001]

Ciao Ve,
se illustri anche come hai risolto può essere d'aiuto ad altri.
Oggi ti avevo letto dal cellulare, ma aspettavo di rientrare in ufficio per analizzare il problema.