Déroulement d'animation

Bien le bonjour tout le monde.

Voilà je suis nouveau dans le monde de Jquery et plus j' avance dans le développement de celui çi et plus je découvre les joies du développement et des problèmes lorsque on pousse un peu les animations.

Ne trouvant pas les informations que je cherche dans la Doc je Jquery, je souhaiterais savoir si il est possible lorsque une animation est exécuté lors d'un "click", si on peut simplement empêcher tous autres interaction durant le déroulement complet de animation.

Plus précisément je voudrais que lorsque mon animation est lancé, que l' on ne puisse pas relancer une autre animation ou faire une autre action pendant que la première animation soit terminé. (comme mettre un delay entre deux click).

J' ai dans un premier temps j' ai utilisé

Code:

$("section").unbind('click')

pour retirer les animations des mes sections lorsque la première ce lance, ça marche pour le déroulement de mon animation, mais je n' arrive plus à réactiver les clicks lorsque je ferme ma première fenêtre d'animation.

Voici un exemple de 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 $(".Block_A").on({ click: function ( e ) { $("section").unbind('click'); cadreA.toggleClass('no_visible').toggleClass('visible'); cadreA.stop(true, true).animate({ width: "100%", height: "100%", opacity: 0.9, }, 1500 ); }, }); $(".icon_A_Close").on({ click: function ( e ) { cadreA.stop(true, true).animate({ width: "25%", height: "50%", opacity: 0.0, }, 1500 ); cadreA.toggleClass('visible',400 ).toggleClass('no_visible',400 ); }, });
Si vous avez des solutions à mon problème je suis preneur :D.

Cordialement et merci d' avance pour votre aide.

Citation:

.animate( properties [, duration ] [, easing ] [, complete ] )

le complete à la fin est un call back du animate et est appelé une fois l'animation terminée ...

J'étais par contre intrigué de la syntaxe du on en y passant un json ... mais à priori elle est correcte et fort intéressante si l'on a beaucoup d'events a raccrocher à un element

Code:

$('#foo').on({click:function(){ alert('foo' )}, mouseover:function(){ $(this).css({'color':'red'})}})

attribution à la fois d'un click et d'un mouseover ...

Citation:

J'étais par contre intrigué de la syntaxe du on en y passant un json ... mais à priori elle est correcte et fort intéressante si l'on a beaucoup d'events a raccrocher à un element

Oui la syntaxe On m' évite de rappeler plusieurs fois ma fonction pour lui attribuer plusieurs évents.

J' ai corrigé quelques erreurs dans mon code, par contre le Complete ne me permet pas vraiment de rendre l' effet que je souhaiterais, (sauf si 'j ai pas compris tout le principe) en effet, pour un peu plus du visuel je vais m' expliquer un peu plus.

J' ai réalisé une sorte de damier de 4X2, lorsque je click sur une de mes cases celle çi prend une taille de l' intégralité de mon écran.
Lorsque je click sur une petite div dans cette fenêtre, celle çi ce ferme.

Le réel problème que je rencontre c'est que mes animations sur chaque cases peuvent être lancé en même temps, provoquant une superposition de mes divs et divers bugs. la solution que j' ai trouvé actuellement c'est de mettre un

Code:

$("section").unbind('click')

sur chaque case de mon damier pour que lorsque je lance mon animation celle çi bloque les animations des mes autres cases.
le problème que j' ai actuellement c'est que lorsque je ferme cette fenêtre, je n' arrive pas à réactiver mes animations de mes sections et je ne peux pas ouvrir mes autres cases du damier.

Le contraire de on() c'est off(). Voici un exemple :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
  <style>
 
    .test {
      position: relative;
      display: inline-block;
      width: 100px;
      height: 100px;
      margin: 12px;
      background-color: red;
    }
 
  </style>
  <script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
  <script>
    'use strict';
 
    $( function(){
 
      $( 'body' ).css( 'background-color', 'lightgrey' );
 
      var jObjTest = $( '.test' );
 
      function testClickEventHandler( ev ){
       jObjTest.off( 'click' );
 
        $( ev.target ).animate( { 'top' : '+=200px' }, 5000, function(){
          $( this ).animate( { 'top' : '-=200px' }, 5000, function(){
            jObjTest.on( 'click', testClickEventHandler );
          } );
        } );
      }
 
      jObjTest.on( 'click', testClickEventHandler );
 
    });
  </script>
</head>
<body>
 
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
  <div class="test"></div>
 
</body>
</html>

Désolé du temps de réponse mais je souhaité vous remercier pour votre aide rapide en tout cas.