Médiaforma

jQuery – Apparition et disparition d’objets

Print Friendly

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);
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply