11548 sujets

JavaScript, DOM et API Web HTML5

Problème de fade sous Internet Explorer

Bonjour,

j'essaye de créer un effet de fade in et de fade out sur un div.
Mes fonctions sont les suivantes : 

////////////////////////////////////////////////////////////////////////
//
// Fonction qui change l'opacité du calque à la valeur souhaitée
//
////////////////////////////////////////////////////////////////////////
function gradient(id, level)
{
	var box = document.getElementById(id);
	box.style.opacity = level;
	box.style.MozOpacity = level;
	box.style.KhtmlOpacity = level;
	box.filters.alpha.opacity = level;
	box.style.filter = "alpha(opacity=" + level+ ")";
	box.style.display="block";
	return;
}
////////////////////////////////////////////////////////////////////////
//
// Fonction pour faire un effet de fadein à un calque
//
////////////////////////////////////////////////////////////////////////
function fadein(id) 
{
	var level = 0;
	while(level <= 1)
	{
		setTimeout( "gradient('" + id + "'," + level + ")", (level* 1000) + 10);
		level += 0.01;
	}
}
////////////////////////////////////////////////////////////////////////
//
// Fonction pour faire un effet de fadeout à un calque
//
////////////////////////////////////////////////////////////////////////
function fadeout(id) 
{
	var level = 1;
	var temps = 0;
	while(level > 0)
	{
		setTimeout( "gradient('" + id + "'," + level + ")", (temps* 1000) + 10);
		level -= 0.01;
		temps += 0.01;
	}
}


Ce code fonctionne parfaitement sous Firefox 2.0 mais pas du tout sous IE 7...
Est ce que quelqu'un aurait une idée?

Merci d'avance!

Bryce
Modifié par Bryce (01 Jul 2008 - 00:08)
Salut.

Je pense que tu confonds setTimeout avec un "sleep" ( fonction qui n'existe pas en JavaScript ).
Quand JavaScript rencontre un setTimeout il lance une sorte de timer puis passe immédiatement à l'instruction suivante.
Tu aurais donc plutôt besoin d'une fonction qui s'appelle elle-même ...

PS : Si je suis pas clair n'hésite pas ...
Peut-être pour un petit détail, la propriété filter de ie, fonctionne avec des valeur de 0 à 100, ors ton code lui proportionne une valeur de 0.01 a 1, ce qui ne lui permet pas d'avoir une opacité de plus de 1%, il faut donc multiplier level par 100 : 

box.style.filter = "alpha(opacity=" + level*100 + ")";
Yes, merci matmat!

C'est exactement ça!

ça fonctionne! Pas aussi bien que sous Firefox, mais ça fonctionne!

Merci!
Désolé de te contredire mais pour moi ( Firefox 3 Linux ) ça ne marchait pas avant et par conséquent ça ne marche toujours pas. Ton effet lag complètement et ce probablement à cause du problème que j'ai pointé dans mon précédent message.
Effectivement, Changaco a raison, et c'est sûrement pour cela que ie bugge un peu avec ta fonction.

Pour faire des effets, il vaut mieux que l'étape suivante soit appelée à la fin de l'étape en cours, donc avec setTimeOut il faut rappeler la fonction tant que l'opacité n'est pas a 1 mais cela depuis la fonction, et non avec while :
function fadein(id) {
  setTimeout(function(){		  
    if(level <= 1) fadein(); 
  },40) 
}

Tu peux aussi utilisé setInterval, qui vat rappeler la fonction à intervalles régulier :

Function.prototype.bind = function (obj) {
  var fn = this;
  return function(){
    return fn.apply(obj,arguments);
  };
};

function Fade(){
  
  var level = 0;
  
  function gradient(){

    var box = document.getElementById(this.el);
    box.style.opacity = this.level;
    box.style.MozOpacity = this.level;
    box.style.KhtmlOpacity = this.level;
    box.filters.alpha.opacity = this.level;
    box.style.filter = "alpha(opacity=" + this.level*100 + ")";
    box.style.display="block";
    return;

  }



  function fadein(id) {
    this.el = id;
    this.timer = setInterval(function(){
      this.gradient();
      this.level += 0.01;
      if(level >= 1) clearInterval(this.timer);
    }.bind(this), 40 );
  
  }

}


à utiliser comme ça :

var fade = new Fade();
fade.fadein('id_name');


j'ai écrit ça un peu vite, je ne sais pas si ça marche... Smiley biggol
Modifié par matmat (30 Jun 2008 - 22:13)
Merci de vos remarques à tous les 2.

J'ai fais mes tests sur Firefox 2.0 et cela marchait bien alors que sous ie 7 cela marchait mais de façon peu satisfaisante...

Je n'ai pas le temps de mettre en place vos fonctions maintenant mais je me réjouit de les tester et je vous tiendrais au courant.

Merci encore!
Hello!

Je suis de retour et j'ai pu essayer de tester vos propositions.

J'ai essayer de comprendre la première proposition de matmat mais je ne vois pas comment tu fais pour changer l'opacité du cadre... Le script ne fait que de se rappeler lui-même en fait mais sans en changer l'opacité...

Pour la deuxième proposition, j'ai également essayé de faire qqch avec mais là encore sans succès... Apparement, il ne connait pas la fonction fadein...

Encore un peu d'aide???

Merci beaucoup!
Sujet clos
Aller à