Discussion :

[John Vass]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('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 ! ^^

[SpaceFrog]

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

[John Vass]

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ù !

[SpaceFrog]

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

[John Vass]

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

[SpaceFrog]

pour le stocker

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et pour le reaffecter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[John Vass]

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 ?

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[John Vass]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$('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 !

[SpaceFrog]

heu en effet ...

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

[John Vass]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SpaceFrog]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)")     });
})

[John Vass]

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 !