Médiaforma

jQuery – Enchaîner plusieurs apparitions/disparitions

Print Friendly

En utilisant les méthodes first() et next() et en précisant une fonction callback dans les méthodes show() et hide(), il est possible d’enchaîner automatiquement les apparitions et disparitions des éléments.

Tapez le code suivant et sauvegardez-le sous le nom apparition-disparition-chainee.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Apparition et disparition d'un élément</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <button id="afficher">Afficher les images</button>
    <button id="cacher">Cacher les images</button><br/>
    <img src="glace.jpg">
    <img src="desert.jpg">
    <img src="montagne.jpg">
    <img src="mer.jpg">

    <script>
      $(function() {
        $('#afficher').attr('disabled','disabled');

        $('#afficher').click(function(){
          $('#afficher').attr('disabled','disabled');
          $('#cacher').removeAttr('disabled');
          $('.im').first().show(1000, function afficheSuivante(){
            $(this).next('.im').show(1000, afficheSuivante);
          });
        });

        $('#cacher').click(function(){
          $('#cacher').attr('disabled','disabled');
          $('#afficher').removeAttr('disabled');
          $('.im').first().hide(1000, function cacheSuivante(){
            $(this).next('.im').hide(1000, cacheSuivante);
          });
        });
      });
    </script>
  </body>
</html>

 

Quatre images de classe im sont insérées dans le document avec la balise <img> :

<img src="glace.jpg">
<img src="desert.jpg">
<img src="montagne.jpg">
<img src="mer.jpg">

 

Lorsque le bouton #cacher est cliqué :

$('#cacher').click(function(){

 

La première image de classe im est cachée. Lorsque la disparition de l’image est terminée, la fonction callback cacheSuivante() est exécutée :

$('.im').first().hide(1000, function cacheSuivante(){

 

Cette fonction passe à l’image suivante (next()) et la cache à son tour (hide). Lorsque la disparition de l’image est terminée, la fonction callback cacheSuivante() est exécutée. Ainsi de suite jusqu’à la disparition de toutes les images :

$(this).next('.im').hide(1000, cacheSuivante);

 

La même technique est utilisée pour afficher les images les unes après les autres. Lorsque le bouton #afficher est cliqué :

$('#afficher').click(function(){

 

La première image est affichée puis la fonction callback afficheSuivante() est exécutée :

$('.im').first().show(1000, function afficheSuivante(){

 

Cette fonction affiche l’image suivante, puis appelle la fonction callback afficheSuivante(). Ainsi de suite jusqu’à la dernière image :

$(this).next('.im').show(1000, afficheSuivante);
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply