Problème de fade avec une image

Bonjour,
C'est la première fois que je fais la demande d'aide sur ce forum et j'espère que je saurais m'exprimer correctement.

Voilà j'ai un problème.

J'ai une fonction qui permet de faire un fade-in et un fade-out sur un element donnée. Cette fonction utilise des setTimeout afin d'obtenir un effet d'accélération de la disparition ou d'apparition.

voici un sommaire de mon code

//ici je crée une nouvelle image selon un paramètre
objImage = new Image();
objImage.src = 'monimage';
	
// image chargée ?
objImage.onload = function() {
  fade-out(monelement1, 1000); //ou 1000 est le délai
  fade-out(monelement2, 1000);

  monelement1.setAttribute('scr', objImage.src);
  monelement2.innerHTML = 'image de Zpx x Ypx';

  fade-out(monelement1, 1000);
  fade-out(monelement2, 1000);
}

mais mon image change et mon fade-out se produit, puis mon fade-in... je sais que c'est à cause du setTimeout, mais y'a t'il moyen d'attendre que l'exécution du fade-out soit terminé avant de continuer... histoire de faireu ne belle transition.

J'ai également mis le code entre les fonctions fade avec un setTimeout, mais je dois mettre la somme du temps des fade-out et je trouve cela "broche à foin".

Y'aurait-il un moyen pour effectuer le fade-out de mes elements, changer la source de l'image (element1), puis de lancer le fade-in pour faire réapparaitre l'image.

Merci d'avance pour votre aide,

Sincèrement,
Modifié par Ahaus (24 Oct 2006 - 03:34)

Je pense que ce serait plus facile de t'aider si tu nous mettais aussi le code de ta fonction de fade in/out.

Ce qui est sûr, c'est qu'en mettant deux instructions à la suite dans une même fonction, tu ne pourras jamais faire exécuter la deuxième seulement une fois que la première ait été terminée. Les deux appels se font forcément à la suite sans attente. LE seul moyen d'obtenir un délai entre 2 instructions est d'utiliser setTimeout/setInterval.

JE ne sais pas si c'est très clair...

Salut,

Effectivement, pour ce genre de script, je passe aussi par un setTimeout. Néanmoins, ce qui peut générer l'attente nécessaire, c'est de lancer le fade-in, une fois la source changée et complètement chargée en se servant de la propriété Image.complete.

Bonjour,
Pour répondre à koala64, j'attends que l'image soit complètement chargé, puis je fais le fadeout, changement de l'image puis fade in
Comme une image vaut mille mots, voila le code:

// permet un effet de fondu fluide
// ---------------
function changeOpacity(objID, lngStart, lngEnd, lngMs) {
	var lngSpeed = Math.round(lngMs / 100);
	var lngTimer = 0;

	// fadeout
	// ---------------
	if(lngStart > lngEnd) {
		for(i = lngStart; i >= lngEnd; i--) {
			setTimeout("setOpacity(" + i + ",'" + objID + "')",(lngTimer *lngSpeed));
			lngTimer++;
		}

	// fadein
	// ---------------
	} else if(lngStart < lngEnd) {
		for(i = lngStart; i <= lngEnd; i++) {
			setTimeout("setOpacity(" + i + ",'" + objID + "')",(lngTimer *lngSpeed));
			lngTimer++;
		}
	}
}

// applique l'opacity à l'objet
// valable pour la majorité des navigateurs
// ---------------
function setOpacity(lngOpacity, objID) {
	var object = objID.style; 
	object.opacity = (lngOpacity /100);
	object.MozOpacity = (lngOpacity /100);
	object.KhtmlOpacity = (lngOpacity /100);
	object.filter = "alpha(opacity=" + lngOpacity + ")";
}

// permet de lancer un fadein
// ---------------
function effectFadein(objID, lngMs) {
	changeOpacity(objID, 0, 100, lngMs);
}

// permet de lancer un fadeout
// ---------------
function effectFadeout(objID, lngMs) {
	changeOpacity(objID, 100, 0, lngMs);
}

function changeImage(pstrImageName) {
	// affectation des variables de la fonction
	// ---------------
	var objImageActuel = document.getElementById('imageActuel');
	var objImageDetail = document.getElementById('imageDetail');
	var objImageTexte = document.getElementById('imageTexte');


	// prechargement de l'image
	// ---------------
	imgChange = new Image();
	imgChange.src = '_img/' + pstrImageName;
	imgChange.onload = function() {
		// affectation des variables
		// ---------------
		var strImageSrc = imgChange.src;
		var lngImageWidth = imgChange.width;
		var lngImageHeight = imgChange.height;

		// fadeout des éléments présents
		// ---------------
		effectFadeout(objImageDetail, 1000);
		effectFadeout(objImageActuel, 1000);	

		// redimension de l'image
		// ---------------
		objImageActuel.setAttribute('width', lngImageWidth);
		objImageActuel.setAttribute('height', lngImageHeight);

		// affichage de la dimension de l'image
		// et changement de la source de l'image
		// ---------------
		objImageTexte.innerHTML = lngImageWidth + 'px <strong>x</strong> ' + lngImageHeight + 'px';
		objImage.setAttribute('src', strImageSrc);	

		// fadein des éléments
		// ---------------
		effectFadein(objImageActuel, 1000);
		effectFadein(objImageDetail, 1000);	

	}
}

je lance la commande via: changeImage('image.jpg');

je ne sais pas si une Class pourrais m'aider dans mon étude, de mettre une variable globale ou je ne sais pas trop. Si la classe devient la seule solution, j'aimerai un peu d'aide car je n'ai encore jamais fait de class en javascript, et j'aimerai ne pas dépendre de d'autre librairie.

Merci pour votre aide !!