Gestion progressive opacité

Version imprimable

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:

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 ?

23/08/2012, 10h01
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.

J'ai essayé avec deux timers :

Code:

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 ?

23/08/2012, 10h23
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:

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
23/08/2012, 10h31
Bovino

Citation:

est ce que je les utilise bien ?

Non !
Je t'invite à faire une recherche sur la syntaxe correcte de ces fonctions...
23/08/2012, 10h41
SpaceFrog

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

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

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

Code:

<ClientSideEvents TrackEnd="updateTickTrackBarLabels" />

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

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

23/08/2012, 11h06
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
23/08/2012, 11h16
Bovino

:fleche: Les fonctions de rappel (callback) ou les utilisations cachées de eval()
23/08/2012, 14h21
SpaceFrog

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