Incompréhension de queue()

**oceane751** · 23/07/2015, 22h00

Bonjour à tous!

J'essaye de comprendre un peu à quoi sert queue()..

J'ai cet exemple :

Code html :

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

1
2
3
4
5
 
 
<button id="nePasEnchainer">Ne pas enchaîner les animations</button><br />
<button id="executerEnMemeTemps">Exécuter les animations en même temps</button><br /><br />
<img src="images1/tigre1.jpg" style="border: 2px black solid; width:200px; height:200px;">

et le jquery :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
$(function() {
 
 
    $('#nePasEnchainer').click( function() {
      $('img').animate({ 'border-width': '100'}, { queue: false, duration: 1500 })
              .animate({ 'width': '-=100'}, 1500);
    }); 
    $('#executerEnMemeTemps').click( function() {
      $('img').animate({ 'border-width': '100', 'width': '-=100' }, 1500);
    }); 
 
 });

C'est peut être idiot comme question, mais je ne vois pas de différence entre les 2 bouts de codes mais surtout ce que ça fait au final...
queue: false = animation finie c'est bien ça?

Pouvez vous m'éclaircir un peu plus à ce sujet, ce queue()? et queue: ?

Merci

**ABCIWEB** · 23/07/2015, 22h57

Mets queue à true si tu veux voir une différence. L'animation finie c'est "complete".

**oceane751** · 23/07/2015, 23h00

si je mets queue à true ça revient à faire ça

Code :

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

1
2
3
4
5
6
 
 
$('#enchainer').click( function() { 
      $('img').animate({ 'border-width': '100'}, 1500 )
              .animate({ 'width': '-=100'}, 1500);
    });

non?

**oceane751** · 24/07/2015, 00h46

par exemple avec ce code, récupérer sur la doc officielle de jquery, on est obligé d'utilisé queue() pour addClass() et removeClass()?

Code html :

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
 
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Petit Chat!</title>
    <script src="jquery.min.js"></script>
<style>
  div {
    margin: 3px;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 0px;
    top: 30px;
    background: green;
    display: none;
  }
  div.newcolor {
    background: blue;
  }
  </style>
  </head>
 
 
<body>
 
 
 
 
Click here...
<div></div>
 
 
 
 
<script>
 
 
$( document.body ).click(function() {
  $( "div" )
    .show( "slow" )
    .animate({ 
             left: "+=200" 
             }, 2000  )
                .queue(function() {
                  $( this ).addClass( "newcolor" ).dequeue();
                })
    .animate({ 
             left: "-=200" 
             }, 500 )
                .queue(function() {
                  $( this ).removeClass( "newcolor" ).dequeue();
                })
    .slideUp();
});
 
 
 
 
</script>
 
 
 
 
 
 
</body>
</html>

Désolé j'essaye de comprendre l'utilité...

**ABCIWEB** · 24/07/2015, 01h35

Envoyé par oceane751

si je mets queue à true ça revient à faire ça

Code :

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

1
2
3
4
5
6
 
 
$('#enchainer').click( function() { 
      $('img').animate({ 'border-width': '100'}, 1500 )
              .animate({ 'width': '-=100'}, 1500);
    });

non?

Oui, y'a de nombreuses syntaxes qui produisent le même effet au final, mais l'avantage de la première syntaxe (avec queue) c'est qu'avec le même code tu peux modifier le comportement en changeant simplement la valeur de queue (tu peux mettre une variable pour indiquer true ou false).
Donc on choisi sa syntaxe non seulement en fonction de l'effet qu'on veut produire mais aussi en fonction de la possibilité de modifier cet effet dynamiquement.

**oceane751** · 24/07/2015, 01h40

ok mais donc avec animate() on ne peut pas utiliser addClass() et removeClass() directement sans utiliser queue () c'est ça?
et quelle est la différence entre queue() et queue: ?

merci encore pour ton aide

Incompréhension de queue()

jQuery

Vue hybride

Discussions similaires

Partager

Partager