sábado, 24 de agosto de 2019

jQuery show hide slow fast

Podemos mostrar (show) o bien podemos ocultar (hide) los selectores del DOM (id, clases, etiquetas) y podemos hacerlo eligiendo la velocidad en milisegundos.

Hemos creado un caso práctico en el siguiente enlace.

Versión 1

HTML

Los ocho botones se han organizado en forma de tabla para que se vean alineados. Al final tenemos un checkbox que si esta marcado nos gustaría que los procesos de ocultar y mostrar los elementos se realizara con un cierto retardo.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery show hide</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1 id="titulo1" class="norte">Polo Norte</h1>  
   <p id="parrafo1" class="norte">Párrafo uno.</p>  
   <h1 id="titulo2" class="sur">Polo Sur</h1>  
   <p id="parrafo2" class="sur">Párrafo dos.</p>  
   <hr>  
   <br>  
   <table>  
    <tr>  
     <td><button id="boton1">Mostrar h1's</button></td>  
     <td><button id="boton2">Ocultar h1's</button></td>  
    </tr>  
    <tr>  
     <td><button id="boton3">Mostrar class='sur"</button></td>  
     <td><button id="boton4">Ocultar class='sur"</button></td>  
    </tr>  
    <tr>  
     <td><button id="boton5">Mostrar id="titulo2"</button></td>  
     <td><button id="boton6">Ocultar id="titulo2"</button></td>  
    </tr>  
    <tr>  
     <td><button id="boton7">Mostrar todo</button></td>  
     <td><button id="boton8">Ocultar todo</button></td>  
    </tr>  
   </table>  
   <p>  
    <label><input type="checkbox" id="cbox" value=""> Con retardo</label>  
   </p>  
  </body>  
 </html>

JavaScript + jQuery

Creamos la variable milisegundos para indicar un posible retardo.
.show() es un método que muestra el elemento indicado
.hide() es un método que oculta el elemento indicado

También podemos indicar la velocidad a la que trabajan estos dos métodos.
  • .hide(2000) es un método que oculta los elementos indicados en 2000 milisegundos (2 s)
  • .hide('slow') equivale a 600 milisegundos
  • .hide('fast') equivalea a 200 milisegundos
  • .show(2000) es un método que muestra los elementos indicados en 2000 milisegundos (2 s)
  • .show('slow') equivale a 600 milisegundos
  • .show('fast') equivalea a 200 milisegundos
Hemos creado la función retardo que comprueba si el checkbox esta activado con el método .prop. Todos las funciones de los botones deben comprobar al ser pulsados si en ese momento el checkbox está activado o no. Este es el motivo por el que se llama en todas las funciones de los botones a la función retardo().

 'use strict'  
 $(function(){  
  var milisegundos;  
  function retardo(){  
   if($('#cbox').prop('checked')){  
    milisegundos=600; //equivale a 'slow'  
    //milisegundos=200 //equivale a 'fast'  
   }else{  
    milisegundos=0;  
   };  
   return milisegundos;  
  };  
  $("#boton1").click(function(){  
   retardo();  
   $('h1').show(milisegundos); //Mostrar h1's  
  });  
  $("#boton2").click(function(){  
   retardo();  
   $('h1').hide(milisegundos); //Ocultar h1's  
  });  
  $("#boton3").click(function(){  
   retardo();  
   $('.sur').show(milisegundos); //Mostrar clase dos  
  });  
  $("#boton4").click(function(){  
   retardo();  
   $('.sur').hide(milisegundos); //Ocultar clase dos  
  });  
  $("#boton5").click(function(){  
   retardo();  
   $('#titulo2').show(milisegundos); //Mostrar id titulo2  
  });  
  $("#boton6").click(function(){  
   retardo();  
   $('#titulo2').hide(milisegundos); //Ocultar id titulo2  
  });  
  $("#boton7").click(function(){ //para dos clases se separan con coma  
   retardo();  
   $('.norte, .sur').show(milisegundos); //Mostrar todas las clases  
  });  
  $("#boton8").click(function(){  
   retardo();  
   $('.norte, .sur').hide(milisegundos); //Ocultar todas las clases  
  });  
 });

Versión 2

Vamos a utilizar toggle para conseguir que con un solo botón ocultemos o mostremos un elemento al pulsarlo de forma alternativa.

Conviene ver la siguiente página de w3schools.


En el siguiente enlace se puede ver su funcionamiento.

HTML

Hemos incluido una frase en un div que al pulsar sobre ella se ocultará.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery show hide</title>  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <h1 id="titulo1" class="norte">Polo Norte</h1>  
   <p id="parrafo1" class="norte">Párrafo uno.</p>  
   <h1 id="titulo2" class="sur">Polo Sur</h1>  
   <p id="parrafo2" class="sur">Párrafo dos.</p>  
   <hr>  
   <div>Esta línea de texto desaparecerá si pulsa sobre ella.</div>  
   <br>  
   <button id="boton1">Mostrar y ocultar los h1</button><br>  
   <button id="boton2">Mostrar y ocultar class=sur</button><br>  
   <button id="boton3">Mostrar y ocultar id=titulo2</button><br>  
   <button id="boton4">Mostrar y ocultar todo</button>  
  </body>  
 </html>

JavaScript + jQuery

  • La frase del div la ponemos de color rojo y de otro tamaño para el font.
  • Con la expresión $(this).hide(); ocultamos el div.
  • Con toggle en los botones podemos ir mostrando y ocultando el contenido de los elementos seleccionados a diferentes velocidades.
Veamos el nuevo método.

$(selector).toggle(speed,callback);
  • El parámetro opcional speed puede tomar los siguientes valores: "slow", "fast" o un número de milisegundos.
  • El parámetro opcional callback es una función que se ejecutará después de que toggle() se complete.
 'use strict'  
 $(function(){  
  $('div').css({'color':'red','font-size':'90%'});  
  $("div").click(function(){  
   $(this).hide();  
  });  
  $("#boton1").click(function(){  
   $('h1').toggle();  
  });  
  $("#boton2").click(function(){  
   $('.sur').toggle(2000);  
  });  
  $("#boton3").click(function(){  
   $('#titulo2').toggle('fast');  
  });  
  $("#boton4").click(function(){  
   $('.norte,.sur').toggle('slow');  
  });  
 });

Versión 3

En la siguiente página tenemos un caso curioso donde una serie de rectrángulos van desapareciendo lentamente a medida que vamos pulsando sobre ellos.


Nuestra versión se encuentra en el siguiente enlace.

  • https://repl.it/@valoro/jQuery-remove

HTML

Sorprendentemente lo único que encontramos en el body es un div.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>jQuery remove</title>  
   <link href="style.css" rel="stylesheet" type="text/css" />  
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>  
   <script type="text/javascript" src="script.js"></script>  
  </head>  
  <body>  
   <div></div>  
  </body>  
 </html>

JavaScript + jQuery

Añadimos con appendTo siete div.
Con una función los ocultamos retardadamente y con otra función los eliminamos (remove).

 'use strict'  
 $(function(){  
  for ( var i = 0; i < 7; i++ ) {  
   $( "<div>" ).appendTo( document.body );  
  }  
  $( "div" ).click(function() {  
   $( this ).hide( 2000, function() {  
    $( this ).remove();  
   });  
  });  
 });

CSS

Definimos rectángulos azules en un div.

 div {  
  background: rgb(25, 225, 250);  
  width: 27px;  
  height: 48px;  
  margin: 2px;  
  float: left;  
 }
en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)