En este fragmento de código vamos a practicar con efectos que nos aporta la librería jQuery. Para ello vamos a coger el cuadrado que utilizamos en el anterior fragmento de código y lo vamos a ocultar y mostrar dependiendo del evento onclick de unos botones que pondremos en nuestro HTML.
Comencemos con los métodos hide() y show():
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
46<html> <head> <title>Ejemplo onclick jQuery</title> <style type="text/css"> #Cuadrado{ width: 100px; height: 100px; background: #2980b9; border-color: #FF622C; border-style: solid; border-radius: 25px; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="scriptEfectos.js"></script> </head> <body> <div id="Cuadrado"></div> <p> <button id="Esconde">Esconder</button> <button id="Muestra">Mostrar</button> </body> </html> |
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { $("#Esconde").click(function(){ $("#Cuadrado").hide(); }); $("#Muestra").click(function(){ $("#Cuadrado").show(); }); }); |
Como veis en el código cuando pulsamos sobre el botón Esconder lanzamos la función asociada el evento onclick $(«#Esconde»).click. Dentro de esa función seleccionamos el div donde tenemos dibujado el cuadrado id=“Cuadrado” y con el método hide() logramos esconder el cuadro. Si ahora le damos al botón Mostrar lanzaremos el método show() y mostraremos de nuevo el cuadrado.
Ahora vamos a sobrecargar estas funciones, fijaros en el siguiente código:
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { $("#Esconde").click(function(){ $("#Cuadrado").hide(1000); }); $("#Muestra").click(function(){ $("#Cuadrado").show(2000); }); }); |
Tanto al método hide como al método show le pasamos un valor. Este número representa en milisegundos cuando tiempo va a tardar en realizar la acción. Así en nuestro ejemplo anterior tardara 1000 milisegundos en ocultarse y 2000 milisegundos en mostrarse:
See the Pen MwNzOg by Alfonso Contreras López (@programarfacil) on CodePen.
Veamos un par de efectos más que realiza jQuery. Fijaros en este script:
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { $("#FadeOut").click(function(){ $("#Cuadrado").fadeOut(3000); }); $("#FadeIn").click(function(){ $("#Cuadrado").fadeIn(1500); }); }); |
Ahora a nuestro cuadrado le hemos asignamos los métodos fadeOut() y fadeIn(), el primero desvanece nuestro cuadrado en 3000 milisegundos y con el segundo vuelve a aparecer en 1500 milisegundos:
See the Pen ZGgmRY by Alfonso Contreras López (@programarfacil) on CodePen.
