Efectos visuales en JQuery

Aplicar efectos

Aplicar vistosos efectos y animaciones en una página web es algo muy sencillo de hacer cuando usamos JQuery. Para ello disponemos entre otros de los siguiente métodos:

show() / hide(): mostrar y ocultar un elemento.
fadeIn() / fadeOut(): muestran y ocultan elementos con un efecto de fundido.
fadeTo(): permite aplicar un efecto de fundido definiendo la velocidad y el nivel de transparencia (opacidad) con el que quedará finalmente.
slideUp() / slideDown(): muestran y ocultan elementos con un efecto de desplazamiento.
toggle() / fadeToggle() / slideToggle(): cada uno de estos métodos conmuntan el estado actual (visible u oculto) de un elemento, con la posibilidad de aplicar efectos de fundido y desplazamiento.

Y ahora para muestra un ejemplo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Eventos de formularios en JQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #div1 { height:100px;width:400px;background-color:lightgreen;padding:20px;margin-bottom:20px;border:2px solid black; }
        input { width:100px; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            // Ocultar

            $("#hide1").click(function() {
                $("#div1").hide();
            });

            $("#hide2").click(function() {
                $("#div1").hide("slow");
            });

            $("#fadeOut").click(function() {
                $("#div1").fadeOut();
            });

            $("#slideUp").click(function() {
                $("#div1").slideUp("fast");
            });

            // Mostrar

            $("#show1").click(function() {
                $("#div1").show();
            });

            $("#show2").click(function() {
                $("#div1").show("fast");
            });

            $("#fadeIn").click(function() {
                $("#div1").fadeIn();
            });

            $("#slideDown").click(function() {
                $("#div1").slideDown("slow");
            });

            // Mostrar y ocultar

            $("#toggle").click(function() {
                $("#div1").toggle("slow");
            });

            $("#fadeToggle").click(function() {
                $("#div1").fadeToggle("slow");
            });

            $("#slideToggle").click(function() {
                $("#div1").slideToggle("slow");
            });
        });

    </script>
  </head>

  <body>

      <div id="div1"><img src="logo.jpg" alt="" /></div>

      <p>Ocultar:</p>

      <input type="button" id="hide1" value="hide()" />
      <input type="button" id="hide2" value="hide('slow')" />
      <input type="button" id="fadeOut" value="fadeOut()" />
      <input type="button" id="slideUp" value="slideUp()" /><p />

      <p>Mostrar:</p>

      <input type="button" id="show1" value="show()" />
      <input type="button" id="show2" value="show('fast')" />
      <input type="button" id="fadeIn" value="fadeIn()" />
      <input type="button" id="slideDown" value="slideDown()" /><p />

      <p>Mostrar/ocultar (conmutan el estado actual del elemento):</p>

      <input type="button" id="toggle" value="toggle()" />
      <input type="button" id="fadeToggle" value="fadeToggle()" />
      <input type="button" id="slideToggle" value="slideToggle()" />

  </body>

</html>

Ejemplo

Los efectos de JQuery dan la posibilidad de definir una función que se procesará cuando haya finalizado la animación. Veamos un ejemplo de cómo hacerlo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | Eventos de formularios en JQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow;font-family:Arial;font-size:10pt; }
        #div1 { height:100px;width:400px;background-color:lightgreen;padding:20px;margin-bottom:20px;border:2px solid black; }
        #log { color:yellow;background-color:red;margin-bottom:10px; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            $("#fadeTo").click(function() {
                $("#div1").fadeTo( 3000, 0.2, function() {
                    $("#log").text("Fin de la animación");
                });
            });
        });

    </script>
  </head>

  <body>

      <div id="log"> </div>

      <div id="div1"><img src="logo.jpg" alt="" /></div>

      <input type="button" id="fadeTo" value="Haz clic" />

  </body>

</html>

Ejemplo

A este tipo de funciones se les denomina funciones callback (consulta más adelante la sección con dicho nombre para obtener más información sobre ellas).

Recuerda que también es posible definir las funciones fuera de los métodos.

Vea también: [ Efectos ]

Tutorial de JQuery

Aplicar efectos