setInterval, incohérence de chargement
Bonjour à tous,
je sais pas si mon titre est super explicite mais c'est ce que j'ai trouvé de mieux. Mon soucis c'est que j'ai un code avec deux fonction temporelle l'idée c'est d'avoir quatre balise qui deviennent transparente les unes-après les autres et qu'une fois la dernière transparente le cycle recommence. Sauf qu'au premier passage la première balise ne devient pas complètement transparente alors que les autres si (du certainement à un décalage de chargement quand je le teste sur le site). Puis au deuxième passage la rapidité de la transparence s’accélère jusqu'à devenir quasiment instantanée:
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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
</head>
<body>
<div id="bobo0" style="width:100px; height:100px; background-color:black"></div>
<div id="bobo1" style="width:100px; height:100px; background-color:yellow"></div>
<div id="bobo2" style="width:100px; height:100px; background-color:green"></div>
<div id="bobo3" style="width:100px; height:100px; background-color:orange"></div>
<script type="text/javascript">
// Fonction qui gère l'opacity sur tous les navigateurs
// l'opacity doit être comprise entre 0 et 1
function gen_opacity(obj,opacity){
//Internet explorer
obj.style.filter = 'alpha(opacity = ' + opacity*100 + ')' ;
//Ayant CSS3 intégré
obj.style.opacity = opacity;
//Mozilla/Phoenix/Firebird/Firefox
obj.style.MozOpacity = (opacity);
//moteur Khtml Linux safair et macOS
obj.style.KhtmlOpacity = (opacity);
}
// variable globales
var x=-1,w,div_conteneur=[];
// Récupération des balise div avec id bobo[x] dans le tableau div_conteneur
div_list = document.getElementsByTagName('div');
if(div_list)
{
for(w=0;w<div_list.length;w++)
{
if(div_list[w].id.indexOf('bobo'+w)!=-1)
{
div_conteneur.push(div_list[w]);
}
}
}
function init(){
//Creation de la première fonction setinterval
var intervalID1 = setInterval(function() {
// permet a chaque lancement de remettre y = 1 ou y est l opacité dans la deuxième fonction
y=1;
//Deuxième fonction setinterval qui transforme l opacité à 0 progressivement
var intervalID2 = setInterval(function() {
y-= 0.005;
if(y>0)
{
// on appelle la fonction gen_opacity
gen_opacity(div_conteneur[x],y);
}
// si y <= à 0 alors on arrête la boucle
else
{
clearInterval(intervalD);
}
}, 10);
// Permet d'atteindre toutes les balises contenue dans div_conteneur[x]
x+=1;
// Si x est plus grand que la taille de l'array alors la boucle doit recommencer à x=-1
if(x>div_conteneur.length)
{
var i;
// permet de remettre opacity à 1 dans toutes les div
for(i=0;i<div_conteneur.length;i++)
{
gen_opacity(div_conteneur[i],1);
x=-1;
}
}
}, 2100);}
window.onload=init;
</script>
</body>
</html> |
j'ai inclut le code html avec pour que vous pussiez vous rendre compte.
D'avance merci à ceux qui prendront le temps de répondre.
