apparition progressive d'une div avec setInterval

Version imprimable

bonjour,

je viens poster un début de script pour afficher une div mise initialement en opacity:0 je cherche à la faire se colorer progressivement avec une fonction par onload. j'ai deux trois test et je n'arrive pas à modifier la valeur du opacity dans le style de ma div.

voila la chose:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script> function opacy() { var di ; di = document.getElementById(test); di.style.opacity += 0.1; } function changeCouleur() { setInterval(opacy, 1000); } </script> <body onload="changeCouleur();"> <div id="test" style="opacity:0; background-color:blue; width:100%; height:100%;'> </div>
je ne voix pas comment manipuler l'opacity d'autant plus que pour IE c'est filter:alpha(opacity=10) et pour FZ c'est opacity:1

Salut,

Citation:

function opacy()
{
var di ;
di = document.getElementById(test);

di.style.opacity += 0.1;
}
Code:

1 2 3 4 5 6 7 function opacy() { var di ; di = document.getElementById('test'); di.style.opacity += 0.1; di.style.filter = 'alpha(opacity=' + di.style.opacity*10 + ')'; }

27/03/2009, 12h42
xess91

Merci Andry Aime ça marche !:king: mais je comprends pas la couleur ne viens pas progressivement ça passe de rien à coloré sur IE et de incolor à semi coloré sur FZ.

si je lis le petit bout de script ça veut dire :

fonction opacy récupère la div ayant comme identifiant "test" et rajoute lui 0.1 à son opacité si c'est FZ ou multipli par 10 si c'est IE.

fonction change de couleur toi tu exécute la fonction opacy tous les mille milliseconde.

c'est bien ça non !? donc ça devrait apparaitre progressivement .....:?
28/03/2009, 12h16
xess91

quelq'un pourrait-il me dire pourquoi avec ces deux fonctions cela n'apparait pas progressivement? siouplai!

recherche personne pour m'expliquer la différence entre la première fonction que j'ai posté qui ne fonctionne pas et les deux de ce message. Je débute et je comprends vraiment pas les différences.

Dans ce message la première marche mais pas le deuxième

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<html>
<head>
<script type="text/javascript">
<!--
function color(element){ 
objet = element; 
intervalle = setInterval("colory(objet,100)",50); 
} 
 
 
function colory(image,maxOpa){ 		
		image.filters.alpha.opacity+=5; 
}
 
//script ma façon
 
</script>
</head> 
 
<center> 
<a href="#" target="_blank"> 
<img src="logo.png" style="filter:alpha(opacity=0);" onload="color(this)"> 
</a> 
</center>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<html>
<head>
<script type="text/javascript">
<!--
 
function color(element){ 
objet = document.getElementById(element); 
intervalle = setInterval("colory(objet,100)",50); 
} 
 
 
function colory(image,maxOpa){ 
		image.filters.alpha.opacity+=5; 	
}
 
//script ma façon
 
</script>
</head> 
 
<center> 
<a href="#" target="_blank"> 
<img src="logo1.png" id="un" style="filter:alpha(opacity=0);" onload="color('un')"> 
<img src="logopapier.png" id="deux" style="filter:alpha(opacity=0);" onload="color('deux')" > 
</a> 
</center>

Et la dernière fonctionne très bien sur EI mais pas FZ moi plus rien comprendre

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function opacy()
	{  
 
		var di ;
		di = document.getElementById('test');
 		di.style.opacity += 0.2;
		di.filters.alpha.opacity+=5;
 
	}
 
 
function changeCouleur()
{
  intervalID = setInterval(opacy, 100);
}

28/03/2009, 15h44
Bovino
La seconde ne fonctionne pas car elle attend l'id de l'élément comme argument, or dans le setInterval, c'est l'élément lui-même que tu transmets, cela fonctionnerait avec :

Code:

intervalle = setInterval("colory(objet.id,100)",50);

Trois remarques cependant :
* Cette fonction n'est valable que pour IE.
* Il est préférable de passer par une fonction dans setTimeout / setInterval plutôt qu'une chaîne :

Code:

intervalle = setInterval(function(){colory(objet,100)},50);

* Il faut prévoir aussi la fin de la boucle :
Code:

1 2 3 4 function colory(image,maxOpa){ if(image.filters.alpha.opacity<maxOpa){image.filters.alpha.opacity+=5;} else{clearInterval(intervalle);} }
28/03/2009, 16h01
xess91

merci Bovino mais ma troisième fontion est prévue pour fonctionner sur IE et MOZZ mais sur MOZZ ça passe de coloré à semi-coloré d'un coup sans se colorer complètement tu as une idée du pourquoi ? STP je cherche mais sans résultat
28/03/2009, 16h09
Bovino

Parce que les styles renvoyés paf FF sont de type chaîne, donc tu concatènes au lieu d'additionner.

Code:

di.style.opacity = parseFloat(di.style.opacity,10) + 0.2;
28/03/2009, 16h16
xess91

Yes Bovino c'est ok pour moi merci,merci,merci,merci tu viens de mettre fin à deux jours de recherches et reflexions sur ce sujet je vais pouvoir adapter une fonction à mes besoins présents et futurs. Et pour infos

Citation:

di.style.opacity = parseFloat(di.style.opacity,10) + 0.2;

des choses comme ça ne sont pas donné sur la toile c'est pas faute d'avoir cherché.:P

En voulant reproduir le script créé ci-dessus j'ai rencontré de nouveaux problèmes c'est pourquoi je post un nouveau script fonctionnel:

Participation Xess91 et Nazoom

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" dir="ltr">
 
 
  <head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Fonction Fade</title>
 
    <style>
      body {
        text-align: center;
      }
    </style>
 
    <script>
 
      function setOpacity(_opacity, _idElement) {
 
        element = document.getElementById(_idElement);
        opacity = (_opacity == 100) ? 99.999 : _opacity;
        element.style.filter = "alpha(opacity:"+opacity+")";// IE/Win
        element.style.KHTMLOpacity = opacity/100;// Safari<1.2, Konqueror
        element.style.MozOpacity = opacity/100;// Older Mozilla and Firefox
		element.style.opacity = opacity/100;// Safari 1.2, newer Firefox and Mozilla, CSS3
      }
 
      function fade(_opacity, _idElement, _delay) {
 
          setOpacity(_opacity, _idElement);
          _opacity = parseInt(_opacity) + 1;
          window.setTimeout("fade('"+_opacity+"', '"+_idElement+"', "+ _delay + ")", _delay);
 
      }
 
 
    </script>
 
  </head>
 
 
  <body onload="fade( '0', 'image', '10')">
    <img id="image" style="filter:alpha(opacity=0);-moz-opacity:.0;opacity:.0;" src="http://www.jb.is.online.fr/blog/wp-content/grabennouitch-linux-inside-23401.png" alt="Image de test"/>
    <br/>
  </body>
</html>