Publicidad

jQuery. Cómo usar la función toggle()

Autor: | Categoría:

jQuery, nuestro amigo que nos hace la vida mucho más fácil con sus funciones.

Hoy os hablo de  la función toggle(). Esta función viene a ser como un interruptor, nos permite con una sola función alternar entre un comportamiento y otro. Es muy útil para poder mostrar/ocultar menús de una web al hacer un click por ejemplo o agrandar/reducir una sección de una web.

Vamos a ver un script básico y su funcionamiento:

<script>
$( "#clickme" ).click(function() {
   $( "#book" ).toggle( "slow", function() {
      // eventos que pasen una vez hecha la animación
   });
});
</script>

Como veis, un anchor, un div, un span o lo que queráis con un id (en este caso #clickme), al hacer click provoca un evento que afectará al elemento con id #book, que este caso, con una animación lenta hará que aparezca, y si se vuelve a hacer click desaparecerá con una animación.

Donde pone // eventos que pasen una vez hecha la animación, podemos escribir cualquier otro efecto que queramos que suceda una vez hacemos click a #clickme, complicando mucho más la trama y mejorando la funcionalidad: colores, tamaños, decoraciones… lo que se os ocurra.

Como siempre, lo ideal seria meter este código dentro de una página externa al html para tener todas las funciones ordenadas y cargar posteriormente dicha hoja al html para mejorar la velocidad de carga y aligerar peso al archivo.

Fácil, ¿no? Ahora tu imaginación es la que tiene que hacer el resto 🙂 Ahora, la cosa se puede complicar todo lo que tu quieras para hacer funciones mucho más complejas para poder tunear tu web de manera más usable posible y haciendola más atractiva tanto visualmente como funcionalmente.

¿En qué páginas has usado esta función para mejorarla? ¡Escribe un comentario y cuéntanoslo!

Publicidad
Etiquetas: , ,
¡Suscríbete!

¡Sé el primero en enterarte de las novedades del diseño web y mejora tus conocimientos!

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte a este blog y recibir notificaciones de nuevas entradas.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies