Efectos web con jQuery

Luis del Valle Hernández

hace 10 años

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>

46<html>

<head>

<title>Ejemplo onclick jQuery</title>

#Cuadrado{

width: 100px;

height: 100px;

background: #2980b9;

border-color: #FF622C;

border-style: solid;

border-radius: 25px;

}

</style>

</head>

<body>

<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();
  });
});

$(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);
  });
});

$(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);
  });
});

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