jquery: cambiare sfondo per ogni voce menu

zioraf

jquery: cambiare sfondo per ogni voce menu

Ragazzi ho un problemuccio.
Ho creato una pagina, molto pulita, dove l'elemento principale sono le immagini.

Ho utilizzato jquery per creare l'effetto di tabelle che, a scorrimento verso l'alto scompaiono ed appaiano quando si clicca sul menu:

$(".collectionsclick").click(function () {            
            $("#about").animate({ "top": "-600px" }, 800);
            $("#corporate").animate({ "top": "-600px" }, 800);
            $("#contacts").animate({ "top": "-600px" }, 800);
            $("#store").animate({ "top": "-600px" }, 800);
            $("#collections").animate({ "top": "180px" }, 800);
        });

Ovviamente, questo piccolo script, l'ho ripetuto 5 volte, perchè ho 5 voci menu.

Ora vorrei fare in maniera, che in base alla voce del menu che si clicca, oltre a far comparire la tabella con l'animazione cambi lo sfondo del sito (nel body ).

Ho fatto una ricerca ed ho provato ad aggiungere questo pezzo di codice:

$(".collectionsclick").click(function () {  
            $("body").animate({ backgroundColor: "#fff" }, 1000);
            $("#about").animate({ "top": "-600px" }, 800);
            $("#corporate").animate({ "top": "-600px" }, 800);
            $("#contacts").animate({ "top": "-600px" }, 800);
            $("#store").animate({ "top": "-600px" }, 800);
            $("#collections").animate({ "top": "180px" }, 800);
        });

..ma non va ...

come potrei risolvere? Grazie.

digital.daigor

A occhio e croce, sostituirei come prima cosa il body con un DIV, a quel punto, userei un attributo ad-hoc per acquisire l'url dell'immagine o il codice che andra' nello sfondo, e via di CSS o Animate...
Credo dia meno problemi se usi la funzione CSS su un div che un animate sul body...

Fammi sapere!

zioraf

Non ho ben capito cosa intendi.

Dici di creare 5 div impostando 5 background-image diversi ..e poi ?? come li richiamo??

Il problema è che il sito è sviluppato in una pagina sola.

Ti ringrazio..ma non ho ben capito cosa intendi..potresti abbozzarmi qualcosa ??

Grazie ancora!

digital.daigor

Un div che sia a tutta pagina, a quel punto ai bottoni assegni un attributo 'sfondo="http://sito.it/sfondo.jpg"'.

Nello script fai una cosa tipo:


$('.bottoni').each(function(){
$(this).onmouseenter(function(){
s = $(this).attr('sfondo');
$('#sfondo').css(background: 'url('+s+')');
}):
});

emanuelevt

Il problema è che jquery non supporta nativamente il cambio di colori - per fare questo devi scaricare un plugin apposito come ad esempio jquery.animate-colors.js