apparition progressive d'une div avec setInterval

**xess91** · 27/03/2009, 02h03

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**andry.aime** · 27/03/2009, 06h33

Salut,

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

di.style.opacity += 0.1;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 + ')';
	}

**xess91** · 27/03/2009, 12h42

Merci Andry Aime ça marche !

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 .....

**xess91** · 28/03/2009, 12h16

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

**xess91** · 28/03/2009, 15h24

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
}

**Bovino** · 28/03/2009, 15h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function colory(image,maxOpa){ 		
		if(image.filters.alpha.opacity<maxOpa){image.filters.alpha.opacity+=5;}		
		else{clearInterval(intervalle);}
}

**xess91** · 28/03/2009, 16h01

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

**Bovino** · 28/03/2009, 16h09

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**xess91** · 28/03/2009, 16h16

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

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é.

**xess91** · 07/05/2009, 17h32

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

apparition progressive d'une div avec setInterval

JavaScript

Discussions similaires

Partager

Partager