Comprendre un tutoriel Animation en jQuery

Toutes vos questions sur jQuery, CSS, HTML5, mise en page...
JorsenR
 
Messages: 1
Inscription: 05 Jan 2018, 19:32

Comprendre un tutoriel Animation en jQuery

Messagede JorsenR » 05 Jan 2018, 19:46

Bonjour,
Je débute en jQuery et pour apprendre, j'ai suivi le cours sur les animations : http://www.finalclap.com/tuto/cours-jquery-61/animation-65/
Ma question porte sur l'exemple 3 (animation d'un rectangle et d'un boulet) que j'ai souhaité reproduire.

Code: Tout sélectionner
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Animations liées : tirer à boulet rouge !</title>
<script src="js/jquery-3.2.1.min.js"></script>
<style type="text/css">

#rectangle{
   position: absolute;
   top:  50px;
   left: 20px;
   width:  90px;
   height: 70px;
   background: #663E10;
}

#boulet{
   position: absolute;
   top:  5px;
   left: 5px;
   width:  60px;
   height: 60px;
   background: #B1221C;
   opacity: 0;
   
   -moz-border-radius: 30px;
   -webkit-border-radius: 30px;
   border-radius: 30px;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function($){
   $('#bouton').click(function(){
      
      $('#rectangle').animate({
         left:'100px',
         top:'220px'
      }, 1000, function(){
         
   
      $('#boulet').animate({
         opacity:'1',
         left:   '600px'
         }, 3000, 'swing');
      
      })
      .animate({
         left:   '-=100px'
      });
   });
   
   $('#boulet').mouseover(function(){
      $(this).animate({
         top: '-=100px'
      });
   });
   
   $('#boulet').mouseout(function(){
      $(this).animate({
         top: '+=100px'
      });
   });
});
</script>

</head>

<body>
<input type="button" id="bouton" value="Lancer l'animation">
<div id="rectangle">
<div id="boulet"></div>
</div>
</body>
</html>



Le hic, c'est que je ne comprends pas ce morceau :
Code: Tout sélectionner
$('#bouton').click(function(){
      
      $('#rectangle').animate({
         left:'100px',
         top:'220px'
      }, 1000, function(){
         
   
      $('#boulet').animate({
         opacity:'1',
         left:   '600px'
         }, 3000, 'swing');
      
      })
      .animate({
         left:   '-=100px'
      });
   });


En fait, il est indiqué d'abord des instructions pour le rectangle
Code: Tout sélectionner
$('#rectangle').animate({
         left:'100px',
         top:'220px'
      }, 1000, function(){


ensuite des instructions pour le boulet
Code: Tout sélectionner
$('#boulet').animate({
         opacity:'1',
         left:   '600px'
         }, 3000, 'swing');
      
      })

et on a ensuite des instructions à nouveau pour le rectangle
Code: Tout sélectionner
.animate({
         left:   '-=100px'
      });
   });

mais ce dernier code s'exécute avant l'animation du boulet alors qu'il est placé après les instructions qui concernent le boulet... pourquoi ?
Si je tente de placer ce morceau de code à la suite des premières instructions du rectangle (ce qui me paraîtrait logique à première vue), l'animation ne fonctionne plus correctement...

Je suis preneur de vos éclairages car là, je suis perdu !! :oops: :idea:
Par avance, un grand merci pour votre aide !

Jorsen

Avatar de l’utilisateur
Galdon
Administrateur du site
Administrateur du site
 
Messages: 2188
Inscription: 06 Sep 2008, 22:05

Re: Comprendre un tutoriel Animation en jQuery

Messagede Galdon » 18 Jan 2018, 23:53

Manifestement jQuery exécute le complete callback ($('#boulet')...) à la fin de la chaine d'animation et pas directement après la première étape de l'animation.

J'ai cherché une preuve de ça dans la doc mais je n'ai pas trouvé.

Quoiqu'il en soit, si tu veux avoir un contrôle plus fin sur l'ordre d'exécution des animations, tu dois apprendre à utiliser les jQuery queues : https://api.jquery.com/queue/

Ça sert à déclarer des suites d'opérations asynchrones, comme des animations (d'ailleurs .animate est basé dessus, sur une queue par défaut qui s'appelle fx il me semble).
"Si tu veux me parler, envoie-moi un... FAX !" - George Abitbol


Retourner vers HTML / CSS / Javascript

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron