Efectos básicos con JQuery

Para poder mejorar la experiencia de usuario, tenemos a nuestra disposición una serie de efectos listos para usar con JQuery. Es increíble la cantidad de plugins que circulan ya por la red pero, por el momento, me parece importante ir conociendo poco a poco la base de esta gran librería para poder hacer nuestro pinitos más adelante :)

En primer lugar, para no ser repetitiva, comentar que todos los efectos aceptan como parámetro una función de callback, la cual se lanzará una vez haya finalizado la animación. Veremos algunos ejemplos. Además, como primer parámetro, se puede especificar una velocidad para manipular el tiempo que durará la animación. Los valores que aceptan son: slow, normal, fast el tiempo en milisegundos.
Por otro lado, los efectos show, hide y toggle pueden ser invocados sin parámetros, obviando la velocidad de la animación.

  • Show: Muestra aquellos elementos, localizados a través del selector, modificando el estilo de display a block con un tiempo de duración específico.
    $("#btnShow").click(function() {
           $("#divEffect").show("slow", function() { alert("Terminó el efecto show") });
       });
  • Hide: Oculta los elementos seleccionados.
    $("#btnHide").click(function() {
            $("#divEffect").hide();
        });
  • Toggle: Es la función perfecta para no tener que implementar show & hide. En realidad, comprueba el valor de display y realiza la opuesta a la actual. También es posible utilizar una condición que actue de switch donde true muestra todos los elementos involucrados y false los oculta.

    $("#btnToggle").click(function() {
           $("#divEffect").toggle(1500);
       });
  •  SlideDown: El efecto consiste en aumentar la altura (height).

    $("#btnSlideDown").click(function() {
            $("#divEffect").slideDown("fast");
        });
    
  •  SlideUp: Produce el efecto contrario que slideDown, disminuyendo la altura de los elementos.

    $("#btnSlideUp").click(function() {
           $("#divEffect").slideUp(3000);
       });
    
  •  SlideToggle: Determina el efecto a realizar entre, slideDown y slideUp.

    $("#btnSlideToggle").click(function() {
           $("#divEffect").slideToggle(200);
       });
  • FadeIn: En este caso, estamos jugando con la opacidad de los elementos. Con fadeIn podemos mostrar uno o varios elementos a la velocidad indicada aumentando la propiedad opacity de su style.

    $("#btnFadeIn").click(function() {
          $("#divEffect").fadeIn("slow");
      });
    
  •  FadeOut: De manera contraria, disminuye la opacidad de los elementos hasta su desaparición.

    $("#btnFadeOut").click(function() {
            $("#divEffect").fadeOut(5000);
        });
  • FadeTo: Si solamente queremos llegar a un grado de opacidad, sin que desaparezca del todo, podemos utilizar fadeTo. Además de utilizar la velocidad como primero, tenemos la posibilidad de pasarle el grado de opacidad que necesitamos para nuestros elementos. Al igual que el resto, tendría un tercer parámetro para la función de callback.

    $("#btnFadeTo").click(function() {
            $("#divEffect").fadeTo(5000, 0.20);
        });
  •  Animate: En realidad, si pensamos en todos los efectos anteriores, lo que estamos haciendo es jugar con los estilos de los elementos y, como valor añadido, dándole una velocidad o duración. Si quisiéramos componer nuestro propio efecto o animación la función animate podría ser bastante útil. Existen dos formas de configurar las animaciones: todos los cambios de estilo al unísono o bien de forma secuencial.

    $("#btnAnimate").click(function() {
            $("#divEffect").animate({
                width: "500px",
                height: "400px"
            }, 2000);
        });
        $("#btnAnimateSec").click(function() {
            $("#divEffect").animate({
                width: "200px"
            }, 2000)
            .animate({
                height: "200px"
            }, 2000, function() { alert("Animación finalizada!!") });
        });
  •  Stop: Permite detener la animación antes de que finalice.

    $("#btnStop").click(function() {
           $("#divEffect").stop();
       });
    
  •  jQuery.fx.off: Si actualizamos la siguiente variable global a true, deshabilitamos todas las animaciones de nuestra aplicación. Esto no significa que el cambio de estilo no se lleve a cabo pero no se tendrá en cuenta la velocidad del efecto.

    $("#btnAnimationOff").click(function() {
            jQuery.fx.off = true;
        });
    $("#btnAnimationOn").click(function() {
            jQuery.fx.off = false;
        });
    

Os dejo el proyecto con todas las demos de este post ;)

¡Saludos!

Evento en Mad.Nug: A rey muerto rey puesto ó qué hay de nuevo en Visual Studio 2010

 

En esta ocasión, tengo el placer de anunciar el próximo evento de MAD.NUG sobre las nuevas funcionalidades de Visual Studio 2010 orientadas al mundo de ALM  y los cambios en los nombres de los productos, donde la principal novedad es la desaparición del nombre de Team System.
Podéis registraros en el siguiente enlace. El evento será de la mano de Bruno Capuano y Luis Fraile el jueves de la semana que viene :)

¡Esperamos veros por allí!

¡Saludos!

Los selectores jerárquicos en JQuery

Si ya hemos revisado los selectores básicos, podemos comenzar con el siguiente bloque: Selectores por jerarquía (Hierarchy selectors). En este grupo podemos obtener aquellos elementos que dependen de otros en la estructura de nuestra página. Por ejemplo, podemos recuperar los radiobuttons dentro de un formulario específico, imágenes dentro de una referencia sin indicar uno en concreto… Quizás puede interesarnos acceder a estos atributos para cambiar su estilo o darle una nueva funcionalidad de una manera indirecta. Las formas de acceso serían:

  • Antecesor y descendiente: Indicando cuál es el antecesor a través del tipo de elemento, podemos acceder a unos descendientes en concreto y darles así un valor añadido. La forma de acceder a ellos sería $(“antecesor descendiente”).

Ejemplo: Tenemos un body con un formulario que contiene dos divs y , a su vez, cada uno contiene una referencia.

<body>
    <form id="form1" runat="server">
    <div>
        <a href="">Este es el primer enlace dentro de un div</a>
    </div>
    <div>
        <a href="">Este es el segundo enlace dentro de un div</a>
    </div>
    </form>
</body>

Queremos que todos aquellos elementos de tipo referencia (descendientes) dentro de un div (antecesor) tengan un fondo azul.

$("div a").css("backgroundColor", "blue");
  • Parent > Child: En este caso, se pondrá el id del padre en primer lugar  y el tipo de los hijos del mismo separados por un mayor que. La diferencia con el anterior es que, en este caso, podemos indicar como primer valor el id de un elemento y los hijos son escogidos por el tipo. La manera de recuperarlos es $(“#parent > child”).

Ejemplo: Tenemos dos divs en el cuerpo de la página y deseamos que aquel llamado “padre” tenga el color de las letras de sus referencias de color rojo.

<body>
    <form id="form1" runat="server">
    <div id="padre">
        Soy el div padre <span>Soy un span</span>
        <label>
            Esto es una label</label>
        <a href="">Texto del enlace</a>
        <div>
            Texto escrito dentro del div <a href="">Texto del enlace</a>
            <input value="Un boton" type="button" />
        </div>
    </div>
    <span>Soy un span</span>
    <label>
        Esto es una label</label>
    <div>
        Soy un div
    </div>
    </form>
</body>

Escribiendo el siguiente selector, únicamente estaríamos pintando el texto del enlace que tiene como hijo el div padre, pero no aquel que está colocando dentro del segundo div que contiene el mismo.

$("#padre > a").css("color", "red");
  • Prev + next: Para complicarlo un poco más, podemos estar buscando todos los botones que tienen previamente una label. Esto se consigue especificando en un primer lugar qué necesitamos tener por delante de los elementos que estamos buscando en el siguiente selector: $(“prev + next”).

Ejemplo:

<body>
    <form id="form1" runat="server">
    <div id="padre">
        <div>
            Texto escrito dentro del div <a href="">Texto del enlace</a>
            <input value="Input sin label" type="button" />
        </div>
    </div>
    <div>
        <div>
            <label>
                Label antes que un input</label>
            <input value="Input despues de una label" type="button" />
        </div>
    </div>
    </form>
</body>

El objetivo en este caso, sería poder mostrar el borde del botón de color rojo, pero solamente del segundo que es el único que cumple las condiciones establecidas.

$("label + input").css("borderColor", "red");
  • Prev ~ siblings: Por último, tenemos la posibilidad de seleccionar los elementos por tipo, considerados hermanos, de otro anterior indicado por id. La diferencia que tiene, respecto a parent > child es que este selector localiza el primer elemento especificado por  el id y, a partir de ese momento, todos los elementos del tipo indicado y  además  que estén a su mismo nivel se verán afectados por el cambio introducido. El selector sería el siguiente: $(“prev  ~ siblings”).

Ejemplo:

<body>
    <form id="form1" runat="server">
    <div id="padre">
        Soy el div padre
        <div>
            Texto escrito dentro del div <a href="">Texto del enlace</a>
            <input value="Un boton" type="button" />
        </div>
    </div>
    <span>Soy un span</span>
    <label>
        Esto es una label</label>
    <div>
        Soy un div
    </div>
    </form>
</body>

Tomando como precedente el div con id padre quiero que los próximos elementos de tipo div tengan un borde de 5px y de color amarillo.

$("#padre ~ div").css("border", "5px solid yellow");

¡Saludos!