Es posible realizar animaciones en propiedades CSS utilizando el método $.fn.animate. Dicho método permite realizar una animación estableciendo valores a propiedades CSS o cambiando sus valores actuales.
Efectos personalizados con $.fn.animate
$('div.funtimes').animate(
{
left : "+=50",
opacity : 0.25
},
300, // duration
// función de devolución de llamada
function() { console.log('realizado');
});Nota Las propiedades relacionadas al color no pueden ser animadas utilizando el método $.fn.animate, pero es posible hacerlo a través de la extensión color plugin. Más adelante en el libro de discutirá la utilización de extensiones.
6.3.1. Easing
[Definición: El concepto de Easing describe la manera en que un efecto ocurre — es decir, si la velocidad durante la animación es constante o no.] jQuery incluye solamente dos métodos de easing: swing y linear. Si desea transiciones más naturales en las animaciones, existen varias extensiones que lo permiten.
A partir de la versión 1.4 de la biblioteca, es posible establecer el tipo de transición por cada propiedad utilizando el método $.fn.animate.
Transición de easing por cada propiedad
$('div.funtimes').animate(
{
left : [ "+=50", "swing" ],
opacity : [ 0.25, "linear" ]
},
300
);Para más detalles sobre las opciones de easing, consulte api.jquery.com/animate.