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"> </div>
</body>
</html>
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>
Comentario
Para el perfecto entendimiento de este ejercicio es preciso conocer los métodos siblings y next de jQuery.
