informaticaPC

Tutorial de JQuery

Efectos visuales


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

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.

Más información

Vea también: [ Efectos ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso