El jQuery animate() método le permite crear animaciones personalizadas.
jQuery animaciones - El animate() Método
El jQuery animate() método se utiliza para crear animaciones personalizadas.
Sintaxis:
$(selector).animate({params},speed,callback);El parámetro params requerido define las propiedades CSS para ser animados.
El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "slow", "fast" , o milisegundos.
El parámetro callback opcional es una función a ejecutar después de la animación completa.
El siguiente ejemplo demuestra un uso sencillo del animate() método; se mueve un <div> elemento hacia la derecha, hasta que se haya alcanzado una propiedad izquierdo de 250 píxeles:
Por defecto, todos los elementos HTML tienen una posición estática, y no se pueden mover.
Para manipular la posición, recuerde que debe establecer en primer lugar la posición de propiedad CSS del elemento al relative, fixed o absolute !
jQuery animate() - manipular las propiedades múltiples
Tenga en cuenta que varias propiedades se pueden animar al mismo tiempo:
Ejemplo
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
Inténtalo tú mismo " ¿Es posible manipular todas las propiedades CSS con el animate() método?
¡Si casi! Sin embargo, hay una cosa importante recordar: todos los nombres de propiedad deben ser camella entubado cuando se utiliza con el animate() método: Usted tendrá que escribir paddingLeft en lugar de padding-left, marginRight en lugar de margin-right , y así sucesivamente.
Además, la animación de color no está incluido en la biblioteca central de jQuery.
Si desea animar el color, es necesario descargar el plug-in de color Animaciones de jQuery.com.
jQuery animate() - Uso de valores relativos
También es posible definir valores relativos (el valor es entonces en relación con el valor actual del elemento). Esto se hace poniendo += o -= frente al valor:
Ejemplo
$("button").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
Inténtalo tú mismo " jQuery animate() - Uso de valores predefinidos
Incluso puede especificar el valor de una propiedad de animación como "show", "hide" o "toggle" :
Ejemplo
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
Inténtalo tú mismo " jQuery animate() - Utiliza cola Funcionalidad
De forma predeterminada, jQuery viene con funcionalidad de colas para las animaciones.
Esto significa que si usted escribe múltiples animate() llama a una después de otra, jQuery crea una cola de "interno" con estas llamadas a métodos. A continuación, se corre el animado llama uno por uno.
Por lo tanto, si desea realizar diferentes animaciones, uno tras otro, tomamos ventaja de la funcionalidad de cola:
Ejemplo 1
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
Inténtalo tú mismo " El siguiente ejemplo primero se mueve el elemento <div> a la derecha, y luego aumenta el tamaño de letra del texto:
Ejemplo 2
$("button").click(function(){
var div = $("div");
div.animate({left: '100px'}, "slow");
div.animate({fontSize: '3em'}, "slow");
});
Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4»
jQuery Referencia de efectos
Para una visión completa de todos los efectos jQuery, por favor vaya a nuestra jQuery Efecto de referencia .