Les évènements chainés

**annso_** · 13/08/2009, 23h15

Bonjour,

je suis surement passée à côté de quelque chose, mais je bloque sur la mise en place d'une réaction en chaine.

J'ai actuellement un code de ce type :

Code :

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

1
2
3
4
 
$('#div1').animate(...);
$('#div2').animate(...);
$('#div3').animate(...);

Les évènements s'exécutent tous plus ou moins en même temps. Je voudrais qu'ils s'exécutent les uns à la suite des autres.

Mais lors de mes recherches, je tombe toujours sur du code de ce type:

Code :

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

jQueryObject.animate().animate().animate()...

mais je n'arrive pas à l'appliquer puisque ce n'est pas le même objet que je souhaite animer.

Merci de votre aide

**danielhagnoul** · 13/08/2009, 23h57

Envoyé par annso_

Bonjour, je suis surement passée à côté de quelque chose, mais je bloque sur la mise en place d'une réaction en chaine.

(C'est nerveux !)

Je m'en vais répondre à cette question par une question, mais c'est dangereux, car je ne suis pas un physicien atomiste !

S'agit-il d'objets différents ayant la même animation ou d'objets différents et chacun ayant une animation propre.

Un peu de code pourrait être utile.

**annso_** · 14/08/2009, 00h03

Bonjour, merci de votre réponse !

Il s'agit de plusieurs objets ayant une animation propre:

Voici un bout de code :

Code :

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

1
2
3
4
5
 
$('#container .content').slideUp('slow');
$('#'+el+' .content').animate({
	height: '290px'
	}, 1000);

(en gros, je voudrais que le premier volet se referme puis qu'un autre s'ouvre, mais actuellement, ça fait les 2 en même temps :d)

**Bovino** · 14/08/2009, 00h29

Salut,
dans ce cas, tu te trompes de concept. Le chainage permet d'enchainer les actions sur un objet à partir du résultat d'une action qui lui a été appliquée.
Toi, ce que tu veux, c'est appeler une autre action sur un autre objet à la fin de l'action précédente. Ce n'est plus du chainage.
La bonne nouvelle, c'est que animate, dans son 2e paramètre, accepte une option appelée 'complete' qui fait ce que tu désires :

Code :

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

1
2
3
4
5
6
7
$('#div1').animate({...}, {
    complete: function(){$('#div2').animate({...}, {
        complete: function(){
            $('#div3').animate(...);
        }
    });
});

**danielhagnoul** · 14/08/2009, 23h01

Bonsoir.

Cela fait 3 h (réparties sur 2 jours) que je joue avec des boutons !

La dernière heure pour convaincre IE8 de faire comme Chrome et Firefox, il est têtu celui-là ! Mais utile !

Il y avait bien une erreur dans mon code

que Web Developer 1.1.8 ma signalé pendant qu'avec Firebug je faisais du pas à pas sur toutes les lignes de codes jQuery.

J'ignorais complètement qu'il existait une seconde écriture pour la fonction animate et donc qu'il existait une option « complete», merci Monsieur Bovino !

Il existe souvent plusieurs méthodes pour arriver aux mêmes buts, il est évident que l'option « complete» fait son travail, mais le code qui utilise cette option n'est pas un modèle de sobriété et les chances de se tromper sont élevées.

Voici mon code d'essai, à votre tour de jouer !

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
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
 
<!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" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        button#btnReset {
            font-family:"Courier New", Courier, monospace;
            font-size:18px;
            font-weight:bold;
        }
        button.ani {
            font-family:"Courier New", Courier, monospace;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    (function($){
 
        //http://james.padolsey.com/javascript/jquery-delay-plugin/
        $.fn.delay = function(time, callback){
            jQuery.fx.step.delay = function(){};
            return this.animate({delay:1}, time, callback);
        }    
 
        var btns = ["btnAni1", "btnAni2", "btnAni3", "btnAni4"];
 
        var params = [
            {height: "60%",fontSize:"6em"},
            {height: "50%",fontSize:"5em"},
            {height: "40%",fontSize:"4em"},
            {height: "30%",fontSize:"3em"}
        ];
 
        function resetBtnAni(){
            $("button[id^='btnAni']").attr("style"," ");
        }
 
        function btnEns(){
            $("button[id^='btnAni']").animate(params[0],800);
        }
 
        function btnEnsPropAni(){
            for (var i in btns) {
                $("#"+btns[i]).animate(params[i], 800);
            }
        }
 
        /*
        * delay ajustable suivant vitesse animation souhaitée
        */
        function btnDelay(){
            $("button[id^='btnAni']").each(function(i,item){
                $(item).delay(500 + (1000*i), function(){
                    $(item).animate(params[0], 800);
                });
            });
        }
 
        /*
        * delay ajustable suivant vitesse animation souhaitée
        */        
        function btnDelayPropAni(){
                $("#"+btns[0]).delay(500, function(){
                    $(this).animate(params[0],800);
                });
 
                $("#"+btns[1]).delay(1500, function(){
                    $(this).animate(params[1], 800);
                });
 
                $("#"+btns[2]).delay(2500, function(){
                    $(this).animate(params[2], 800);
                });
 
                $("#"+btns[3]).delay(3500, function(){
                    $(this).animate(params[3], 800);
                });
        }
 
        function complete(){
            //animate(params, options);
            $("#"+btns[0]).animate(
                params[0],
                {
                    duration: 800,
                    complete: function(){
                        $("#"+btns[1]).animate(
                            params[1],
                            {
                                duration: 800,
                                complete: function(){
                                    $("#"+btns[2]).animate(
                                        params[2],
                                        {
                                            duration: 800,
                                            complete: function(){
                                                $("#"+btns[3]).animate(
                                                    params[3],
                                                    {
                                                        duration: 800
                                                    }
                                                );
                                            }
                                        }
                                    );
                                }
                            }
                        );
                    }
                }
            );
        }
 
        function callback(){
            //animate(params, duration, easing, callback);
            $("#"+btns[0]).animate(params[0], 800, function(){
                $("#"+btns[1]).animate(params[1], 800, function(){
                    $("#"+btns[2]).animate(params[2], 800, function(){
                        $("#"+btns[3]).animate(params[3], 800);
                    });
                });
            });
        }
 
        $(document).ready(function(){
 
            $("#btnEns").click(function(){
                btnEns();
            });
 
            $("#btnEnsPropAni").click(function(){
                btnEnsPropAni();
            });
 
            $("#btnDelay").click(function(){
                btnDelay();
            });
 
            $("#btnDelayPropAni").click(function(){
                btnDelayPropAni();
            });
 
            $("#btnComplete").click(function(){
                complete();
            });
 
            $("#btnCallback").click(function(){
                callback();
            });
 
            $("#btnReset").click(function(){
                resetBtnAni();
            });
 
        });
    })(jQuery);
    </script>
</head>
<body>
    <div style="margin:12px;">
        <button id="btnReset">RESET</button>
        <br /><br />
        <button id="btnEns">Tous ensemble, même animation</button>
        &nbsp;
        <button id="btnEnsPropAni">Tous ensemble, animation propre</button>
        <br /><br />
        <button id="btnDelay">Avec delay(), même animation</button>
        &nbsp;
        <button id="btnDelayPropAni">Avec delay(), animation propre</button>
        <br /><br />
        <button id="btnComplete">Avec complete</button>
        &nbsp;
        <button id="btnCallback">Avec callback</button>
    </div>
    <div style="margin:12px;">
        <button id="btnAni1" class="ani">Btn1</button>
        <br /><br />
        <button id="btnAni2" class="ani">Btn2</button>
        <br /><br />
        <button id="btnAni3" class="ani">Btn3</button>
        <br /><br />
        <button id="btnAni4" class="ani">Btn4</button>
        <br /><br />
    </div>
</body>
</html>

**annso_** · 05/09/2009, 22h22

Je reviens de vacances d'ou un petit délai depuis mon dernier message...

Merci Bovino pour ta réponse, je vais m'atteler à ça et je passerais mon topic en résolu si je ne rencontre pas de problème.

Les évènements chainés

jQuery

Vue hybride

Discussions similaires

Partager

Partager