Dynamiser un animate BackgroundColor, est-ce possible ?

Bonjour !

J'ai une fonction qui me permet de changer la couleur d'éléments html/css via une instruction .animate sur mon js.
Toutefois, selon le bouton sur lequel je clique, la couleur doit changer différemment. J'ai déjà permis à mon JS de déterminer la couleur à mettre selon le cas avec un switch, mais mettre l'instruction .animate au cas par cas dans le switch, sachant qu'il y a pas mal de chose à changer n'est pas le plus approprié. Je veux le mettre en dehors.

Dans le switch, je stocke selon le cas la couleur à mettre dans une variable déclaré auparavant :

Code:

---

codeCouleur = "(0, 0, 255, 0.4)" // Par exemple

---

Et mettre l'instruction animate après le switch, admettons...

Code:

---

$('header').animate({backgroundColor: "rgba("+ codeCouleur + ")"}); // Exemple qui marche pas, je me doute bien, mais c'est pour détailler l'idée...

---

Quelqu'un peut m'aider là-dessus ? J'avoue qu'étant débutant en JQuery, j'ai un peu de mal à cerner toutes les notions... :)

Merci bien ! ^^

il existe un plugin spécial pour faire de l'animate sur les couleurs
http://www.bitstorm.org/jquery/color-animation/

L'animation en elle-même je l'ai faite et elle marche. Désolé j'ai oublié de le préciser...
C'est juste que, comme j'ai plein de chose à faire selon le lien cliqué (changement de couleur et d'image de fond, brèf tout un programme), je veux stocker la couleur dans une variable dans le switch, puis faire l'instruction d'animate en dehors du switch... C'est tout.

Pas d'autres questions ? Je reste dans le coin au cas où ! ;)

passe par le data() de l'objet pour stocker les couleurs ?

Heeeuuu o_O
Suis largué, là... :)
As-tu un exemple quelque part ?

pour le stocker

Code:

---

$('#monbjet').data('couleur',$(this).css('background-color'))

---

et pour le reaffecter

Code:

---

$('#monbjet').css('background-color',$(this).data('couleur'))

---

Ca marche pas pour le moment, mais j'ai peut-être mal appliqué le procédé...
Déjà 'couleur', c'est la variable ou le code couleur qu'il faut mettre. Et dans ce dernier cas, c'est un code #XXXXXX ou rgba ?

couleur est le nom que je donne arbitrairement à la variable data

Code:

---

1 2	$('#monbjet').data('nomdemavariablequicontientlacouleurdedepart',$(this).css('background-color'))

---

Code:

---

$('#monbjet').css('background-color',$(this).data('nomdemavariablequicontientlacouleurdedepart'))

---

Ouais, j'ai du mal utiliser ces lignes, parce que ca ne donne rien...
J'ai du encore me planter quelque part...

J'ai mis la première ligne dans un case de mon switch

Code:

---

1 2 3 4 5

case 'couleur_des_eaux': codeCouleur = '#005562'; $('header').data('codeCouleur',$(this).css('background-color')) break;

---

et j'ai mis la deuxième après le switch...

Code:

---

$('header').css('background-color',$(this).data('codeCouleur'));

---

Maintenant, j'essaie d'identifier le problème, mais c'est pas avec mon niveau actuel que ça va se dépatouiller facilement... ^^
En même temps j'ai peut-être rien compris du tout... C'est pas impossible !

heu en effet ...

data permet de stocker une donnée au niveau de l'objet ...

Code:

---

1 2 3 4 5 6 7 8 9 10

<div id="foo"> truc</div>   .../... // le set de la variable $('#foo').data('nomdevar','le contenu de la donnée');   .../... //la récupération de la variable $('#foo').click( function(){ alert($(this).data('nomdevar') )})

---

après dedans tu mets ce que tu veux ...

Bon, ca y est ! J'ai trouvé le truc ! Et on a bien failli se compliquer la vie pour rien... ^^

Bon, je récap toute la procédure :

Chaque lien a un attribut personnalisé de type classe. Jusque là facile !

Code:

---

1 2	<a href="#" class="couleur_1" id="lien_accueil">Accueil</a> <a href="#" class="couleur_2" id="lien_news">Accueil</a>

---

On récupère cette classe et on le traite dans un switch. au moment du clic sur une des liens... et ensuite, juste après le switch, la fonction .animate() suffit...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$("nav a").click(function() { var classRecuperee = $(this).attr("class"); var codeCouleur; switch (classRecuperee){ case 'couleur_1': codeCouleur = "rgba(150, 150, 150, 0.4)"; break; case 'couleur_2': codeCouleur = "rgba(100, 200, 80, 0.4)"; break; }   $('header, nav').animate({backgroundColor: codeCouleur}); });

---

Et moi, c'est l'instruction . animate() que j'ai mal écrit, en fait...
Bah oui, comme un âne, j'ai mis ma variable codeCouleur entre double cote ! comme çà ("codeCouleur"). Donc forcément, ca ne risquait pas de marcher ! Quand je dis que je n'en loupe pas une ! ^^

Merci pour votre aide !

A la prochaine

Ha ben si tu n'as que deux couleurs ...

je pensais que tu voulais stcoker la couleur initiale de l'element et lui restituer pas la suite.
Mais si ce n'est que switcher entre deux couleurs ...

Code:

---

1 2 3 4

$("nav a").click(function() { $('header, nav').animate({backgroundColor: ($(this).attr("class")=="couleur1")? "rgba(150, 150, 150, 0.4)":"rgba(100, 200, 80, 0.4)") }); })

---

En fait, dans ma navigation, j'ai sept liens, donc sept couleurs dans le switch... J'en ai mis que deux pour éviter que l'exemple fasse 50 lignes ! ^^
Je cherchai seulement à mettre l'instruction animate en dehors.. mais une boulette bien bête m'a bien ralenti ! :P