Bonjour,
j'ai voulu faire un script en js qui fait apparaitre un élément en fondu. Pour ça j'incrémente l'opacité de l'élément de 0 à 1. Le problème est qu'au lieu d'être progressif, l'opacité passe directement de 0 à 1 après un temps d'attente.

Voici le script :

function opacity(id, i)
{
	var item = document.getElementById(id).style;
	item.opacity = (i / 100);
	item.filter = 'alpha(opacity='+i+')'; 
	item.MozOpacity = (i / 100);
	item.KhtmlOpacity = (i / 100);
}
function fondu(id)
{
	var item = document.getElementById(id).style;
	// On rend l'élément transparent
	item.opacity = 0; 
	item.filter = 'alpha(opacity=0)'; 
	item.MozOpacity = 0;
	item.KhtmlOpacity = 0;
	var i;
	for(i = 0; i <= 100; i++)
	{
		var time = 5000;
		// On incrémente l'opacité de l'élément toutes les "time" millisecondes
		setTimeout('opacity(\''+id+'\', \''+i+'\')', time);
	}
}

Et je l'appelle tout simplement comme ça :

<a href="#" onclick="fondu('id_element')">Fondu</a>

Il n'y a pas d'erreur javascript dans la console d'erreur ...

Pouvez-vous m'aider à trouver d'où vient le problème ?


Merci beaucoup

Le problème vient du fait que tu appelles ta fonction opacity dans un for. Tu as beau y mettre un setTimeout à l'interieur, le for, lui, tourne en boucle sans délai. La fonction opacity est donc appelée 100 fois sans délai, seulement le premier de ces 100 appels commence avec un décalage en raison du setTimeout. Voila pourquoi le changement se faisait d'un coup.
Mais en plus de cela, tu peux grandement simplifier ton système, en passant par une fonction récursive (qui s'appelle elle-même), ainsi :

function fondu(id, opacity){
	opacity = (!opacity ? 0 : opacity)+20;
	var item = document.getElementById(id).style;
	item.opacity = (opacity/100);
	item.filter = 'alpha(opacity='+opacity+')'; 
	
	if(opacity < 100){
		var time = 100;
		setTimeout('fondu(\''+id+'\', '+opacity+')', time);
	}
}

Qui s'appelle de la même façon :

<a href="#" onclick="fondu('id_element')">Fondu</a>

Tu noteras que j'augmente l'opacité de 20 à chaque fois. Augmenté d'un point à la fois créé une boucle beaucoup trop lourde (par 20, cela fait seulement 5 exécution de la boucle). Comme cela est rapide, cela donne malgré tout un effet de fondu fluide (faut penser que si l'effet doit être joli, cela doit rester pratique à naviguer tout de même, et donc relativement rapide).

Effectivement ça marche, merci beaucoup.

Ce qui m'étonne c'est que j'ai trouvé un script très très semblable au mien, et qui fonctionne :
http://www.brainerror.net/scripts/javascript/blendtrans/
Je ne vois pas de différence majeure avec le mien, et pourtant il a l'air de fonctionner.

Autre problème : lorsque j'appelle la fonction au chargement de la page (onload), ça rame à mort ... Y a-t-il un moyen d'éviter ça ?

Merci