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():
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>$(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:
$(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:
$(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.
