Médiaforma

All posts tagged apparition

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);

Les méthodes show() et hide() permettent respectivement de faire apparaître et disparaître des éléments quelconques dans le DOM :

show(durée en millisecondes);
hide(durée en millisecondes);

 

Pour illustrer ces deux méthodes, nous allons permettre à l’utilisateur d’afficher et de cacher une image.

 

Saisissez le code suivant et sauvegardez-le sous le nom apparition-disparition.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>
    <img id="zebre" src="zèbre.jpg"><br />
    <button id="afficher">Afficher l'image</button>
    <button id="cacher">Cacher l'image</button>
    <script>
      $(function() {
        $('#afficher').attr('disabled','disabled');
        $('#afficher').click(function(){
          $('#afficher').attr('disabled','disabled');
          $('#cacher').removeAttr('disabled');
          $('#zebre').show(3000);
        });
        $('#cacher').click(function(){
          $('#cacher').attr('disabled','disabled');
          $('#afficher').removeAttr('disabled');
          $('#zebre').hide(3000);
        });
      });
    </script>
  </body>
</html>

 

A l’affichage de la page, le bouton Afficher est désactivé :

$('#afficher').attr('disabled','disabled');

 

Lorsque le bouton #cacher est cliqué, il est désactivé et le bouton #afficher est activé :

$('#cacher').click(function(){
  $('#cacher').attr('disabled','disabled');
  $('#afficher').removeAttr('disabled');

 

L’image est alors cachée en 3000 millisecondes :

$('#zebre').hide(3000);

 

Inversement, lorsque le bouton #afficher est cliqué, il est désactivé et le bouton #cacher est activé :

$('#afficher').click(function(){
  $('#afficher').attr('disabled','disabled');
  $('#cacher').removeAttr('disabled');

 

L’image est alors affichée en 3000 millisecondes :

$('#zebre').show(3000);