Discussion :

[Happa]

Bonjour,

petite présentation de mon code et de son fonctionnement j'ai un tableau rempli d'element et ces éléments aparaises et disparaisse en fonction de leur valeur. Cette gestion de la visibilité est géré par une trackbar avec deux pointeurs. Par exemple si le pointeur 1 est sur la valeur 10 et que le pointeur 2 est sur la valeur 30 alors tous les éléments avec une valeur comprise en 10 et 30 seront visibles.

Maintenant voici mon code :

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
function updateTrackBarLabels() {
                    updateTickTrackBarLabels(tickTrackBar);
                    updateItemTrackBarLabels(itemTrackBar);
                }
                function updateTickTrackBarLabels(trackBar) {
                    a = trackBar.GetPositionStart();
                    b = trackBar.GetPositionEnd();
 
                    for (var i = 0; i < document.forms["form1"].length; i++) {
 
                        if (document.forms["form1"].elements[i].type == "button") {
 
                            if (document.forms["form1"].elements[i].value >= a && document.forms["form1"].elements[i].value <= b) {
                                document.forms["form1"].elements[i].style.opacity = 0.5;
                                document.forms["form1"].elements[i].style.opacity = 0.6;
                                document.forms["form1"].elements[i].style.opacity = 0.7;
                                document.forms["form1"].elements[i].style.opacity = 0.8;
                                document.forms["form1"].elements[i].style.opacity = 0.9;
                                document.forms["form1"].elements[i].style.opacity = 1;
                            }
                            else {
                                document.forms["form1"].elements[i].style.opacity = 0.4;
                                document.forms["form1"].elements[i].style.opacity = 0.3;
                                document.forms["form1"].elements[i].style.opacity = 0.2;
                                document.forms["form1"].elements[i].style.opacity = 0.1;
                                document.forms["form1"].elements[i].style.opacity = 0;
 
                                if (document.forms["form1"].elements[i].value >= 50 && b == 50) {
                                    document.forms["form1"].elements[i].style.opacity = 1;
                                }
                            }
                        }
                    }
                }

Avec ce code la gestion de l'opacité est instantanée et donc ma question est comment gérer l'opacité progressivement ?

[vermine]

Bonjour,

Par exemple en passant par un timer qui va lancer un changement d'opacité toutes les x millisecondes.

Ou bien en utilisant un framework JavaScript qui gère les effets de transitions sur les styles CSS.

[Happa]

J'ai essayé avec deux timers :

Code :

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

1
2
3
4
5
6
7
                            if (document.forms["form1"].elements[i].value >= a && document.forms["form1"].elements[i].value <= b) {
                                setInterval(document.forms["form1"].elements[i].style.opacity = 0.5, 2000);
                                setTimeout(document.forms["form1"].elements[i].style.opacity = 0.6, 2000);
                                document.forms["form1"].elements[i].style.opacity = 0.7;
                                document.forms["form1"].elements[i].style.opacity = 0.8;
                                document.forms["form1"].elements[i].style.opacity = 0.9;
                                document.forms["form1"].elements[i].style.opacity = 1;

mais il n'y a pas de délais de deux secondes sur le changement de valeur que ce soit avec setInterval ou avec set Timeout est ce que je les utilise bien ?

[vermine]

Ces instructions ne sont pas bloquantes. C'est-à-dire qu'il lance le timer et puis passe à l'instruction suivante. Si vous passez par le setInterval, vous ne devriez avoir qu'une seule instruction faisant appel à une fonction qui aurait ce genre de code :

Code :

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

1
2
document.forms["form1"].elements[i].style.opacity = document.forms["form1"].elements[i].style.opacity + 0.1;
//i étant un paramètre passé à la fonction

[Bovino]

est ce que je les utilise bien ?

Non !
Je t'invite à faire une recherche sur la syntaxe correcte de ces fonctions...

[SpaceFrog]

utilises soit setTImeout avec un increment ou décrement
ou un setInterval (fonction, délai)

sinon passe par jquery avec fadeIn() / fadeOut()

[Happa]

Ma fonction est déclenché avec l'événement TrackEnd :

Code :

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

<ClientSideEvents TrackEnd="updateTickTrackBarLabels" />

et pour ma fonction j'essaie de faire avec setInterval :

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
function updateTrackBarLabels() {
                    updateTickTrackBarLabels(tickTrackBar);
                    updateItemTrackBarLabels(itemTrackBar);
                }
                function updateTickTrackBarLabels(trackBar) {
                    a = trackBar.GetPositionStart();
                    b = trackBar.GetPositionEnd();
 
                    for (var i = 0; i < document.forms["form1"].length; i++) {
 
                        if (document.forms["form1"].elements[i].type == "button") {
 
                            if (document.forms["form1"].elements[i].value >= a && document.forms["form1"].elements[i].value <= b) {
                                function timer() {
                                    document.forms["form1"].elements[i].style.opacity = document.forms["form1"].elements[i].style.opacity + 0.5;
                                }
                                setInterval(timer (),1000);
                            }
                            else {
                                document.forms["form1"].elements[i].style.opacity = 0.4;
                                document.forms["form1"].elements[i].style.opacity = 0.3;
                                document.forms["form1"].elements[i].style.opacity = 0.2;
                                document.forms["form1"].elements[i].style.opacity = 0.1;
                                document.forms["form1"].elements[i].style.opacity = 0;
 
                                if (document.forms["form1"].elements[i].value >= 50 && b == 50) {
                                    document.forms["form1"].elements[i].style.opacity = 1;
                                }
                            }
                        }
                    }
                }

L'opacité est modifiée mais instantanément.
La gestion du temps n'est toujours pas prise en compte et je ne comprends pas pourquoi.

[SpaceFrog]

Oui donc
soit tu n'as pas lu les posts précédents
soit tu n'y a rien compris

Je te conseille de relire calmement les inforamtions données précédemment

[Bovino]

Les fonctions de rappel (callback) ou les utilisations cachées de eval()

[SpaceFrog]

sinon pour l'idée du decrement d'opacité voilà comment s'y prendre
http://www.developpez.net/forums/d88...ondu-enchaine/