Médiaforma

All posts tagged show

Par défaut l’apparition et la disparition des éléments utilise un modèle de progression swing. Il est possible de modifier ce comportement par défaut en choisissant un modèle linear. Pour cela, il suffit de préciser la valeur ‘linear’ en deuxième paramètre des méthodes show() et hide() :

$('#zebre').show(3000,'linear');
$('#zebre').hide(3000,'linear');

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