[résolu]Fonction de fondu de couleur dans div agit bizarrement

salut,

je crée un site pour un ami, je me suis pris au jeu et je commence à essayer d'utiliser javascript et ajax.
la présentation utilise pas mal de couleurs différentes mais de même ton pour chaque pages. j'ai voulu que la transition entre chaque page soit progressive au niveau du changement de couleur.
pour illustrer le principe, voila le site: julian-hamm.fr
il n'est pas tout a fait fonctionnel pour l'instant.
le fondu fonctionne avec tout les onglets sauf "concert" et "contact", en effet la boite sensé changer de couleur clignote et met une mauvaise couleur en fond.

voila le script pour le fondu:

function fadeColors(id,startColor,stopColor,nbTrans,delay) {
	 
	var elm = document.getElementById(id) || document.getElementById("main_ext" ); // l element qui doit etre dégradé
	var delay = delay || 40; // en millisecondes c ets le temps qui passe entre chaque execution. a diminuer si la fluidité n est pas au rendez vous
	var nbTrans = nbTrans || 7; // le nombre de transitions...a augmenter si ce n ets pas assez fluide
	var startColor = startColor || [255,255,255]; // remplacer par les chiffres qui vont bien
	var stopColor = stopColor || [0,0,0]; // pareil

	// maintenant il faut calculer le delta de chaque couleur
	//la deuxieme valeur du tableau calcule lequel du deltat d'arrivé ou de départ est le plus grand et plus petit et stocke une valeur true ou false
	var rDelta = new Array (Math.floor((stopColor[0]-startColor[0])/nbTrans), stopColor[0]<startColor[0]);
	var gDelta = new Array (Math.floor((stopColor[1]-startColor[1])/nbTrans), stopColor[1]<startColor[1]);
	var bDelta = new Array (Math.floor((stopColor[2]-startColor[2])/nbTrans), stopColor[2]<startColor[2]);
	 
	// on cree les variables ou vont etre stockees les couleurs temporaires
	var rTemp = startColor[0];
	var gTemp = startColor[1];
	var bTemp = startColor[2];
	 
	// un petit setInterval pour que la fonction se repete d elle meme
	var interval = setInterval(function() {
		if(rDelta[1])
			{if(rTemp > stopColor[0])rTemp += rDelta[0]; else rTemp = stopColor[0];}
		else
			{if(rTemp < stopColor[0])rTemp += rDelta[0]; else rTemp = stopColor[0];}
		if(gDelta[1])
			{if(gTemp > stopColor[1])gTemp += gDelta[0]; else gTemp = stopColor[1];}
		else
			{if(gTemp < stopColor[1])gTemp += gDelta[0]; else gTemp = stopColor[1];}
		if(bDelta[1])
			{if(bTemp > stopColor[2])bTemp += bDelta[0]; else bTemp = stopColor[2];}
		else
			{if(bTemp < stopColor[2])bTemp += bDelta[0]; else bTemp = stopColor[2];}

		if (rTemp == stopColor[0] && gTemp == stopColor[1] && bTemp == stopColor[2]) {
		clearInterval(interval);
		elm.style.backgroundColor = "rgb("+stopColor[0]+","+stopColor[1]+","+stopColor[2]+" )";
		}
		else{elm.style.backgroundColor = "rgb("+rTemp+","+gTemp+","+bTemp+" )";}
	},delay);

}

le code est une légère adaptation de celui trouvé ici

les couleurs pour chaque onglet:

	case "news": 	var startColor = [176,23,23]; 	break;
	case "concert": 	var startColor = [78,26,26]; 	break;
	case "musique":	var startColor = [71,71,71]; 	break;
	case "photos": 	var startColor = [155,155,155]; break;
	case "videos": 	var startColor = [123,39,39]; 	break;
	case "contact": 	var startColor = [51,51,51]; 	break;
	case "pro":		var startColor = [171,171,171]; break;
	default:		var startColor = [0,0,0]; break;

mon hypothèse est qu'il y-a une sorte de problème de calcul quelque part lié au code rgb de "contact" et "concert" et qui fait planter le code. mais bon c'est une hypothèse un peu foireuse.

donc, première chose, rencontrez vous vous aussi ce problème en naviguant sur le site?(il faut parfois insister un peu pour qu'il apparaisse.)

deuxièmement... avez vous une solution?

merci d'avoir lu en tout les cas, bye.

j'ai rajouté un alert a la fin du fondu, il aparait lorsque je clique sur tout les onglets, sauf concert... qui est pourtant traité de la même maniere que les autres.
Modifié par e-rwan (31 Jul 2010 - 11:36)

Salut,

(Je me base sur le code js de ta page en ligne, pas sur celui que tu as donné ici)

Prenons l'exemple d'un passage de Musique à Concert. Le background de la div doit passer de rgb(71, 71, 71) à rgb(78, 26, 26). Tu veux faire cela en 15 incrémentations (nbTrans). Pour cela tu calcules la valeur de ces incrémentations et tu trouves :
- pour r des incrémentations de (78-71) / 15 = 0 (car arrondi à l'entier inférieur)
- pour g des incrémentations de (26-71) / 15 = -3
- pour b des incrémentations de (26-71) / 15 = -3

Ensuite tu boucles jusqu'à ce que les r, g et b de départ aient atteint les r, g et b d'arrivée (avec setInterval). Si tu veux mon avis, pour r, tu peux attendre longtemps (boucle infinie à chaque fois).

Solutions là tout de suite sans réfléchir beaucoup :
- ne pas utiliser setInterval() mais une boucle for, de manière à être certain de ne pas boucler infiniment.
- s'assurer de n'avoir des incrémentations égales à zéro que lorsque les valeurs de départ et d'arrivée sont strictement égales.

Sinon, pour ne pas réinventer la roue, et si tu es prêt à inclure jQuery dans ta page, tu as le plugin jQuery Color, qui fait tout ça à ta place et te permet de passer à autre chose

marcv:
ok, il me semblait bien que le problème se situait au niveau du calcul, mais je n'arrivais pas à trouver où. tu as eu l'œil, merci beaucoup.
je vais d'abord essayer de faire en sorte que r g ou b soit toujours au moins égale à 1, ma fonction détecte quand la valeur dépasse celle de destination, donc pas de problème.
une boucle for serait moins facile à contrôler que setinterval et pour jquery j'hésite encore car il pourrait aussi remplacer ma grosse requête xhr, mais pour l'instant, réinventer la poudre me convient.

je vais tester de se pas, et merci encore marcv.

edit: j'ai donc rajouter ça:

		if(!rDelta[0]) (rDelta[1]) ? rDelta-- : rDelta++;
		if(!gDelta[0]) (gDelta[1]) ? gDelta-- : gDelta++;
		if(!bDelta[0]) (bDelta[1]) ? bDelta-- : bDelta++;

et ça à l'air de fonctionner... mais bon je trouve que ça commence à devenir une peu lourd pour un simple fondu...
merci encore à toi marcv pour ce regard auguisé!
++
Modifié par e-rwan (31 Jul 2010 - 20:04)