Objetos y Funciones Diferidas en jQuery
/

El cambio de efecto, un clásico en jQuery

Para tener en cuenta los cambio de estados dentro de los efectos en jQuery es necesario estudiar y conocer varias funciones que lo permiten. Dentro de estas funciones podemos mencionar las siguientes: toggle(); slide toggle(); fade toogle().

a) toggle ()

Permite cambiar el estado de visualización del elemento seleccionado. Esto nos lleva a que si el elemento se está mostrando lo hace desaparecer (con la función hidden ()) y al revés (con la función show ()).

Ejemplo:

$("p").toggle();

b) toggle (función 1, función 2)

Esta instrucción es igual al anterior pero más que un cambio de estado es un cambio de funciones a ejecutar, saltando de la función 1 a la función 2 alternativamente.

Ejemplo

$("p").toggle(

   function() { $this.class ("color", "red");}, 

   function() {$(this).class ("color", "blue");}

);

c) slideToggle (velocidad, función a la que se llama)

Este método lo que hace es desplazar hacia abajo un elemento que está en estado «Up» y en sentido contrario al elemento que está en estado «Down».

El único parámetro que se ve alterado es la altura.

  • Velocidad (opcional): admite una de las tres predefinidas: ‘slow’, ‘normal’, o ‘fast’. También, puede admitir un número que expresa los milisegundos que corresponden a la duración del efecto.

Ejemplo de uso

$('div').slideToggle('fast');

  • Hace referencia a la función a a que se llama (callback), es un parámetro opcional también. En definitiva es la función que se tiene que ejecutar cuando termina el efecto.

Ejemplo de uso

$('div').slideToggle ('fast', function() {alert ("Fin");});

d) fadeToogle (velocidad, función a la que se llama)

Con este método se ocultan los elementos a través de modificar la opacidad.

  • velocidad (opcional): cadena de caracteres que representa una de estas tres velocidades predefinidas (‘slow’, ‘normal’, ‘fast’) o el número en milisegundos que corresponde con la duración del efecto.

Ejemplo de uso

$(p:first").fadeToggle("slow");

  • La función es la que se llama (opcional): se ejecuta cuando el efecto termina.

Ejemplo de uso
$("p:last").fadeToggle ("fast",function(){$#log").append("<div>Terminado</div>");

El efecto se agregó a partir de la versión 1.4.4 de jQuery y además hay que tener en cuenta que devuelve un objeto.

Ejemplo 1: cambio de efecto


<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Altruistas jQuery</title>
   <script src="../js/jquery.js"></script>
   <script>
      $(document).ready(function(){
         $("#start").click(function(){
            $("#div_toggle").toggle("slow");
         });
      });
   </script>
<style>
   #div_toggle {
      background-color: #9cf;
      width: 150px;
      height: 150px;
      border: 1px solid black;
   }
   p {
      cursor: pointer;
   }
</style>
</head>
<body>
   <p id="start">Haga click para hacer desaparecer y aparecer</p>
   <div id="div_toggle">&nbsp;</div>
</body>
</html>

Ejecutar ejemplo 1

Ejemplo 2: menú acordeón

<!DOCTYPE html>
<html lang="es">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Altruistas jQuery</title>
<scriptsrc="../js/jquery.js"></script>
<script>
   $(document).ready(function(){
      $(".acordeon p").hide();
      $(".acordeon h3").on("click", function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("activa");
        $(this).siblings("h3").removeClass("activa");
      });
   });
</script>
<style>
   .acordeon {
      width: 250px;
border-bottom:solid 1px black;
}
.acordeon h3 {
   margin: 0;
   background: #9cf url(arrow.gif) no-repeat right-51px;
   padding: 7px 15px;
   font: bold 0.9em Arial, sans-serif;
   border: 1px solid black;
   border-bottom: none;
   cursor: pointer;
}
.acordeon h3:hover {
   background-color: #ccecff;
   }
.acordeon h3.activa {
   background-position: right5px;
   }
.acordeon p {
   margin: 0;
   font: 0.9emArial, sans-serif;
   padding: 10px15px10px;
   border-left:solid1pxblack;
   border-right: solid1pxblack;
 }
</style>
</head>
<body>
   <div class="acordeon">
      <h3>Series de Televisión</h3>
      <p>- Vergüenza<br>
         - La Casa de Papel<br>
         - Instinto</p>
      <h3>Libros</h3>
      <p>- Las hijas del capitán <br>
         - 100 años de soledad</p>
      <h3>Lenguajes de programación</h3>
      <p>- JavaScript<br>- PHP<br>- C++</p>
   </div>
</body>
</html>

Ejecutar ejemplo 2

Comentario

Para el perfecto entendimiento de este ejercicio es preciso conocer los métodos siblings y next de jQuery.

Deja una respuesta

Your email address will not be published.

Objetos y Funciones Diferidas en jQuery
Anterior post

Las funciones diferidas en jQuery de Javascript

Objetos y Funciones Diferidas en jQuery
Siguiente post

Encontrar los hermanos de un elemento en el DOM

Latest from Programación