Latest web development tutorials

efectos jQuery - Animación

método jQuery animado () le permite crear animaciones personalizadas.



jQuery

jQuery animaciones - animate () método

método jQuery animado () se utiliza para crear animaciones personalizadas.

sintaxis:

$(selector).animate({params},speed,callback);

parámetro necesario params define la formación de las propiedades CSS animación.

El parámetro de velocidad opcional especifica la duración del efecto. Puede tomar los siguientes valores: "lento", "rápido", o milisegundos.

El parámetro de devolución de llamada opcional es el nombre de la función ejecutada después de la finalización.

El siguiente ejemplo demuestra un método simple animado aplicación (). Se elemento <div> hacia la derecha para mover 250 píxeles:

Ejemplos

$("button").click(function(){
$("div").animate({left:'250px'});
});

Trate »

lámpara Por defecto, todos los elementos HTML tienen una posición estática y no pueden moverse.
Para la posición de funcionamiento, recordar la primera posición del elemento de atributo CSS establece en relativo, fijo o absoluto!


jQuery animado () - Utilización de múltiples propiedades

Tenga en cuenta que el proceso de generación de la animación puede utilizar varias propiedades:

Ejemplos

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});

Trate »

lámparaPuede animar () para operar todos los atributos CSS?

Sí, casi! Sin embargo, lo importante para recordar: Cuando se utiliza animado (), escribir todos los nombres de los atributos deben utilizar la notación camello, por ejemplo, debe ser usado en lugar de paddingLeft padding-left, en lugar de utilizar marginRight margen derecha, etc. .

Al mismo tiempo, la animación de color no está incluido en la biblioteca central jQuery.

Si usted necesita para generar la animación del color, es necesario jquery.com descarga en color Animaciones plugin.



animado jQuery () - el uso de valor relativo

También se puede definir el valor relativo (el valor es relativo al valor actual del elemento). Necesidad de preceder el valor con las teclas + o = - =:

Ejemplos

$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});

Trate »


() JQuery animado - utilizar el valor predefinido

Usted puede incluso poner el valor de la propiedad de animación para "mostrar", "ocultar" o "cambiar":

Ejemplos

$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

Trate »


animado jQuery () - Uso de la función de cola

De forma predeterminada, jQuery proporciona capacidades de gestión de colas para la animación.

Esto significa que si se escribe más de una después de otra llamada animado (), jQuery creará un método de llamar a estas colas "interno". Luego, uno por uno para ejecutar estos animan llamadas.

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");
});

Trate »

El siguiente ejemplo del elemento <div> se mueve a la derecha 100 píxeles, y luego aumentar el tamaño del texto:

Ejemplo 2

$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});

Trate »