IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Déroulement d'animation


Sujet :

jQuery

  1. #1
    Membre averti
    Femme Profil pro
    Montpellier
    Inscrit en
    Janvier 2016
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 37
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Montpellier

    Informations forums :
    Inscription : Janvier 2016
    Messages : 15
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $("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 : 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
    $(".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 .

    Cordialement et merci d' avance pour votre aide.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 658
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 658
    Billets dans le blog
    1
    Par défaut
    .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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $('#foo').on({click:function(){ alert('foo' )}, mouseover:function(){ $(this).css({'color':'red'})}})
    attribution à la fois d'un click et d'un mouseover ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  3. #3
    Membre averti
    Femme Profil pro
    Montpellier
    Inscrit en
    Janvier 2016
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 37
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Montpellier

    Informations forums :
    Inscription : Janvier 2016
    Messages : 15
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    $("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.

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Le contraire de on() c'est off(). Voici un exemple :

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

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre averti
    Femme Profil pro
    Montpellier
    Inscrit en
    Janvier 2016
    Messages
    15
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Âge : 37
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Montpellier

    Informations forums :
    Inscription : Janvier 2016
    Messages : 15
    Par défaut
    Désolé du temps de réponse mais je souhaité vous remercier pour votre aide rapide en tout cas.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. déroulement animation flash
    Par ober007 dans le forum Flash
    Réponses: 1
    Dernier message: 15/12/2008, 09h18
  2. Comment ne pas rejouer une animation après un clic ?
    Par mmmmhhh dans le forum ActionScript 1 & ActionScript 2
    Réponses: 4
    Dernier message: 04/09/2002, 16h11
  3. [Composants][Animation] Lire une vidéo compressée
    Par femtosa dans le forum Composants VCL
    Réponses: 6
    Dernier message: 03/09/2002, 08h03
  4. Rx Controls Gif animés
    Par toufou dans le forum Composants VCL
    Réponses: 6
    Dernier message: 23/08/2002, 14h09
  5. Passage de parametre a une anim Flash 5
    Par debug dans le forum Intégration
    Réponses: 4
    Dernier message: 03/06/2002, 17h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo