11548 sujets

JavaScript, DOM et API Web HTML5

Fonction qui ne tourne pas rond

Bonjour tout le monde,

j'ai posté récemment pour un sujet analogue, une solution m'avait été donné, qui fonctionnait parfaitement. Aujourd'hui, me voilà avec un autre soucis.

J'ai une fonction qui fait apparaître progressivement une image.


function changement1 ()
{

	
	var objet = document.getElementById("cadre");
	objet.style.background = "url(../images/slider/grand_" + min_1 + ".jpg) no-repeat";
	
	objet.style.opacity = 0.00;
	var opacity = 0.00;


	var fondu = function fondue ()
	{
		if (objet.style.opacity != 1.00)
		{
			opacity = opacity + 0.05;
			objet.style.opacity = opacity;
		}
		else
		{
			clearTimeout(timer);
		}
	};
	
	

	fondu();
	var timer = setInterval(fondu, 10);
	
}


Celui-ci est fonctionnel, cependant j'aimerais d'abord diminuer l'opacité à 0, avant de la remonter à 1.

J'avais fait cela :


function changement1 ()
{

	
	var objet = document.getElementById("cadre");
	objet.style.background = "url(../images/slider/grand_" + min_1 + ".jpg) no-repeat";
	
	objet.style.opacity = 1.00;
	var opacity = 1.00;
	
	var apparition = appear ()
	{
		if (objet.style.opacity != 1.00)
		{
			opacity = opacity - 0.05;
			objet.style.opacity = opacity;
		}
		else
		{
			clearTimeout(timer2);
		}
	};

	apparition();
	var timer2 = setInterval(apparition, 10);
	

	var fondu = function fondue ()
	{
		if (objet.style.opacity != 1.00)
		{
			opacity = opacity + 0.05;
			objet.style.opacity = opacity;
		}
		else
		{
			clearTimeout(timer);
		}
	};
	
	

	fondu();
	var timer = setInterval(fondu, 10);
	
}


Seulement, ça ne s'exécute pas. Quelqu'un aurait-il une idée ? Smiley sweatdrop

Passez tous une bonne soirée Smiley cligne


WIFI
Bonsoir,
En fait ton code est en conflit avec lui même Smiley biggol .
La gestion d'action dans le temps est un peu difficile.

Au début tu dit fait diminue de 0.05 l'opacité toutes les 10ms. (Au passage nom étrange car la variable apparition fait disparaitre Oo.)
Jusque là pas de problème. Mais juste après tu demande la même chose mais en inverse : augmente de 0.05 l'opacité toutes les 10ms.

Résultat : toutes les 10ms l'opacité va monté ET descendre, d'où le problème.

Pour résoudre ce problème on utilise une fonction dite de callback et l'algo va ressembler à ça :

fonction diminue_opacite(callback : fonction)
    si opacité > 0
        opacité = opacité - 0.04
        diminue_opacite(callback) //via un setTimeout
    sinon si callback
        callback();

fonction augmente_opacite(callback : fonction)
    si opacité < 1
        opacité = parseFloat(opacité) + 0.04 //parseFloat si tu utilise directement objet.style.opacity sinon se sera une chaine concaténer...
        augmente_opacite(callback) //via un setTimeout
    sinon si callback
        callback();

Si opacity > 0
    diminue_opacite(augmente_opacite)

Modifié par jo_link_noir (29 Sep 2009 - 20:02)
Sujet clos
Aller à