Médiaforma

jQuery – Fondu-enchaîné

Print Friendly

Les méthodes fadeIn() et fadeOut() agissent progressivement sur l’opacité d’un élément. La première affiche l’élément et la deuxième fait disparaître l’élément. Si aucun paramètre n’est précisé, l’animation dure 400 millisecondes. Dans le cas contraire, le paramètre indique la durée de l’animation en millisecondes.

Voici quelques exemples :

fadeIn();
fadeIn(1000);
fadeOut();
fadeOut(4000);

 

Exercice

En partant du code HTML suivant, ajoutez les instructions jQuery nécessaires pour définir un fondu-enchainé sur les images :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fondu-enchaîné</title>
    <style type="text/css">
      img { position: absolute; left: 0px; top: 0px; }
      #i3 {z-index: 1;}
      #i2 {z-index: 2;}
      #i1 {z-index: 3;}
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img src="chien.jpg" id="i1">
    <img src="cheval.jpg" id="i2">
    <img src="girafe.jpg" id="i3">
    <script>
      $(function() {
        // Ajoutez des instructions ici
      });
    </script>
  </body>
</html>

 

Les images sont positionnées de façon absolue (position: absolute;) en haut et à gauche de l’écran (left: 0px; top: 0px;).

La propriété z-index définit l’ordre d’empilement des images. Plus z-index est grand, plus l’image se trouve en avant-plan. Ici, l’image #i1 (le chien) se trouve au-dessus de l’image #i2 (le cheval) qui se trouve elle-même devant l’image #i3 (la girafe).

Le code à mettre en œuvre est similaire à celui qui avait été utilisé pour afficher progressivement les images dans la section précédente : on utilise la fonction callback de la méthode fadeOut() pour enchaîner les disparitions.

$('img').first().fadeOut(4000, function suivante() {
  $(this).next('img').fadeOut(4000,suivante);
});

 

Un effet fadeOut() est appliqué sur la première image (#i1). Lorsque cet effet est terminé, la fonction callback suivante() est appelée. Cette fonction s’intéresse à l’image suivante (next(‘img’)). Elle lui applique un fadeOut et appelle la fonction callback suivante() lorsque la disparition est terminée.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply