Ejemplo de código fuente en jQuery para ver cómo funcionan los métodos .one(), .css() y .animate() de la api de jQuery.
ÍNDICE
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
Descargar ejemplo