Para acabar vamos a ver un ejemplo del método animate(), pero bastante simplificado. En realidad sólo vamos a utilizar el
primero de los parámetros, para indicar las propiedades CSS que deseamos animar.
Tendremos un titular en la página H1 con algunos atributos de estilos:
<h1 style="border-bottom: 1px solid #ff8800; font-size: 15pt;">Animacion jQuery</h1>
<h1 style="border-bottom: 1px solid #ff8800; font-size: 15pt;">Animacion jQuery</h1>
Nuestra animación hará que el borde del elemento pase a tener 20 píxeles de anchura y que el tamaño de la fuente suba para
25pt. Para ponerla en marcha utilizaríamos un código como el siguiente
$("h1").animate({
'border-bottom-width': "20",
'font-size': '25pt'
});
Como se puede ver, en notación de objeto indicamos dos atributos CSS y los dos valores a los que queremos animarlos. El
primero de los valores, que no tiene unidades, es considerado como píxeles. El segundo valor, que se indica en puntos (pt),
hará que jQuery utilice ese tipo de unidades en vez de los píxeles.
Además, podemos fijarnos que en este caso a animate() sólo le hemos pasado unparámetro, con la lista de las propiedades
CSS a animar.
Por tanto, dejamos a jQuery que utilice los valores por defecto de tiempo de animación y función de
animación.
Pero veamos una página que hace uso de ese método, con el código completo. Como veremos, en la página tendremos
además dos enlaces, uno para poner en marcha la animación y otro para restaurar el CSS de los elementos a los valores
originales. Así que, de paso que vemos como hacer un animate(), aprenderemos además a lanzar la ejecución de las
animaciones como respuesta a eventos de usuario.
<html>
<head>
<title>Método animate jQuery</title>
<script src="../jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function(){
$("#animar").click(function(e){
e.preventDefault()
$("h1").animate({
'border-bottom-width': "20",
'font-size': '25pt'
});
});
$("#restaurar").click(function(e){
e.preventDefault()
$("h1").css({
'border-bottom-width': "1",
'font-size': '15pt'
});
});
})
</script>
</head>
<body>
<h1 style="border-bottom: 1px solid #ff8800; font-size: 15pt;">Animacion jQuery</h1>
Trabajando con el método animate:
<a href="#" id="animar">Animar</a>
<br>
<br>
Vuelvo a lo que había antes:
<a href="#" id="restaurar">Restaurar</a>
</body>
</html>
No hay comentarios:
Publicar un comentario