Incompréhension de queue()

Version imprimable

Bonjour à tous!

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

J'ai cet exemple :
Code:

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:

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 ;)

23/07/2015, 22h57
ABCIWEB

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

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

Code:

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

non?

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:

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

24/07/2015, 01h35
ABCIWEB
Citation:
Envoyé par oceane751

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

Code:

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.
24/07/2015, 01h40
oceane751

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 ;)