Ejemplo jQuery: métodos .one(), .css() y .animate()

Ejemplo de código fuente en jQuery para ver cómo funcionan los métodos .one(), .css() y .animate() de la api de jQuery.

Descripción del ejemplo

El ejemplo contrendrá tres botones que al pulsarse realizará cada una de las siguientes funcionalidades:

•     Mostrar un mensaje “Bienvenido al JQuery”, pero sólo la primera vez que se pulsa el botón (Para ver el funcionamiento de .one() ).
•     Modificar el color de fondo del la cabecera al pulsar el botón (Para ver el funcionamiento de .css() ).
•     Animar una imagen cambiando su opacidad al 50% y colocándole un borde  durante 500 milisegundos (Para ver el funcionamiento de .animate() ).

Código

Código jQuery

$(document).ready(function () {
    $("#btn1").one("click", function () {
        alert("Bienvenido al JQuery");
    });
    $("#btn2").click( function () {
        $("header").css("background-color", "blue");
    });
    $("#btn3").click(function () {
        $("figure img")
            .animate({ opacity: "0.50" }, 500, function() {
                // Mensaje Opacidad Completa.
                $("#btn3").after("<div>Opacidad completa.</div>");
                
            })
            .css({ border: '0 solid blue' }).animate({
                borderWidth: 15
            }, 500, function () {
                // Mensaje Borde Completado.
                $("#btn3").after("<div>Borde completado.</div>");
                
            });
    });
});

Código HTML

    <!-- Contenido -->
    <section>
            
            <figure>
                <img id="img1" src="hommer.gif" width="163" height="257" alt="Hommer Simpson"  />
                <figcaption>Hommer Simpson</figcaption>
            </figure>
    </section>
    <section>
            <form>
                <input id="btn1" type="button" value="ONE" /><br />
                <input id="btn2" type="button" value="CSS" /><br />
                <input id="btn3" type="button" value="ANIMATE" />
            </form>
    </section>

Demo del ejemplo

VER DEMO

Descargar ejemplo