. Animate (propriedades, [durao] [, facilitando] [completa])Retorna: jQuery Descrio: Executar uma animao personalizada de um conjunto de propriedades CSS.

verso acrescentou: 1,0animar

(propriedades, [durao] [, facilitando]

[completa]).
propriedades Um mapa das propriedades CSS que a animao ir se mover na direo. durao cadeia A ou o nmero de determinar quanto tempo a animao ser executada. facilitando Uma string indicando que aliviar a funo a ser usado para a transio. completa A funo a ser chamada uma vez que a animao total.
verso acrescentou: 1,0.

animate (propriedades, opes)

o o o o o o

propriedades Um mapa das propriedades CSS que a animao ir se mover na direo. opes de um mapa de opes adicionais para passar para o mtodo. Chaves com suporte: durao : uma string ou nmero que determina quanto tempo a animao ser executada. flexibilizao : A seqncia de caracteres indicando que aliviar a funo a ser usado para
a transio.

completa : A funo a ser chamada uma vez que a animao total. passo : A funo a ser chamada aps cada etapa da animao. fila : Um booleano que indica se a animao para colocar na fila de efeitos. Se falso , a animao vai comear imediatamente. partir de jQuery 1,7 , a fila de opo tambm pode
aceitar uma string, caso em que a animao adicionado fila representada por essa string. specialEasing : Um mapa de uma ou mais das propriedades CSS definido pelo argumento de propriedades e suas funes de atenuao correspondente (acrescentou 1.4).

O . animate () mtodo que nos permite criar efeitos de animao em qualquer propriedade CSS numrico. O nico parmetro obrigatrio um mapa das propriedades CSS.Este mapa semelhante ao que pode ser enviada para o css (). mtodo, exceto que a gama de propriedades mais restritiva.

Propriedades e Valores de animao

Todas as propriedades de animao deve ser animada a um nico valor numrico , exceto como observado abaixo, a maioria das propriedades que no so numricos no podem ser animados usando a funcionalidade jQuery bsicas (por exemplo, largura , altura , ou esquerdapode ser animado, mas cor de fundo no pode ser , a menos que o jQuery.Color () plugin utilizado). Valores de propriedade so tratados como um nmero de pixels, a menos que especificado em contrrio. As unidades los e % pode ser especificado quando aplicvel. Alm de propriedades de estilo, algumas propriedades no-estilo, como scrollTop escrollLeft , bem como propriedades personalizadas, pode ser animado. Propriedades CSS abreviada (por exemplo, margem, fundo, borda) no so suportados. Por exemplo, se voc deseja recuperar a margem prestados, use: $ (elem) css ('marginTop'). e $ (elem)

css ('marginRight'). e assim por diante.

Alm de valores numricos, cada propriedade pode ter as cordas 'show' , 'esconder' e'toggle' . Esses atalhos permitem animaes personalizadas ocultar e mostrar que levem em conta o tipo de exibio do elemento.

Propriedades de animao tambm pode ser relativo. Se um valor fornecido com um lder + =ou -

= seqncia de caracteres, ento o valor alvo calculado somando ou subtraindo o nmero dado a
partir do valor atual da propriedade. Nota: Ao contrrio dos mtodos de animao, tais como taquigrafia . slideDown ()e . fadeIn

() , o . animate () mtodo faz no tornar visveis elementos ocultos, como parte do efeito. Por
exemplo, dado $ ('someElement') hide () animar ({height: '20px '}, 500).. , a animao ser executado, mas o elemento vai permanecer oculto .

Durao
Duraes so dadas em milissegundos; valores mais altos indicam animaes mais lento, e no mais rpidas. As seqncias de 'fast' e 'lenta' pode ser fornecido para indicar a durao de 200 e 600 milsimos de segundo, respectivamente.

Funo completa
Se fornecido, a completa funo de callback disparado uma vez a animao total. Isto pode ser til para amarrar animaes diferentes juntos em sequncia. O retorno de chamada no enviado nenhum argumento, mas este est definido para o elemento DOM que est sendo animado. Se vrios elementos so animados, o callback executado uma vez por elemento combinado, no uma vez para a animao como um todo.

Uso Bsico
Para animar qualquer elemento, como uma imagem simples:
<div id="clickme"> Clique aqui </ Div> <Img id = "book" src = alt "book.png" = "" width = "100" height = "123" style = "position: relative; left: 10px;" />

Para animar a opacidade, esquerda offset, e altura da imagem em simultneo:

$ ('# ClickMe'). Click (function () { $ ('# Book "). Animate ({ opacidade: 0,25, esquerda: '+ = 50 ", height: "toggle" }, 5000, funo () { / Animao / completo. }); });

Note que o valor alvo da altura propriedade "toggle" . Desde que a imagem era visvel antes, a animao diminui a altura a 0 para escond-lo. Um segundo clique, em seguida, inverte essa transio:

A opacidade da imagem j est no seu valor-alvo, de modo que este imvel no animado pelo segundo clique. Uma vez que o valor-alvo para esquerda um valor relativo, a imagem se move ainda mais direita durante esta segunda animao. Propriedades direcionais ( topo , direita , baixo , esquerda ) no tm efeito discernvel sobre se os seus elementos posio propriedade de estilo esttica , que o padro. Nota: O jQuery UI projeto estende o animate (). mtodo, permitindo que alguns estilos nonumricos, tais como cores para ser animado. O projeto tambm inclui mecanismos para a especificao de animaes atravs de aulas de CSS ao invs de atributos individuais. Nota: se tentar animar um elemento com uma altura ou largura de 0px, onde o contedo do elemento visvel devido ao estouro, jQuery pode cortar esse estouro durante a animao. Ao fixar as dimenses do elemento original que est sendo escondida no entanto, possvel garantir que a animao corra bem. A clearfix pode ser usado para corrigir automaticamente as dimenses do seu elemento principal, sem a necessidade de definir isto manualmente.

Funo passo
A segunda verso . animate () fornece um passo opo - uma funo callback que disparada em cada etapa da animao. Esta funo til para permitir tipos de animao personalizados ou alterar a animao, uma vez que est ocorrendo. Ele aceita dois argumentos (agora e fx ),

e este est definido para o elemento DOM que est sendo animado. agora : o valor numrico da propriedade sendo animado em cada etapa fx : uma referncia ao jQuery.fx objeto de prottipo, que contm um nmero de propriedades, tais como elem animado para o elemento, comear e terminar para o valor primeiro e ltimo da propriedade animada, respectivamente, e prop para a propriedade sendo animado. Note que o passo funo chamada para cada propriedade animada em cada elemento de animao. Por exemplo, dados dois itens da lista, o passo funo incndios quatro vezes em cada etapa da animao:
$ ('Li'). Animate ({ opacidade: 0,5, height: '50% ' }, { etapa: function (agora, fx) {

var data = fx.elem.id + '' + fx.prop + ':' + agora; $ ('Body') append ('<div>' + dados + '</ div>').; } });

Facilitando
O parmetro restantes . animate () uma string de nomenclatura de uma funo de atenuao para uso. Uma funo de atenuao especifica a velocidade em que a animao progride em diferentes pontos dentro da animao. As implementaes apenas facilitando na biblioteca jQuery so o padro, chamado de balano , e que avana em um ritmo constante, chamada de linear . Mais funes facilitando esto disponveis com o uso de plug-ins, mais notadamente o conjunto jQuery UI .

Por propriedade Flexibilizao

A partir da verso jQuery 1.4, voc pode definir funes de propriedade por aliviar dentro de um nico . animate () chamada. Na primeira verso do . animate () , cada propriedade pode ter um array como o seu valor: O primeiro membro da matriz a propriedade CSS eo segundo membro uma funo de atenuao. Se uma funo de atenuao por propriedade no definida por uma propriedade particular, ele usa o valor do . animate ()argumento facilitando mtodo opcional. Se o argumento flexibilizao no definido, o padro balano funo usada. Por exemplo, para animar simultaneamente a largura e altura com o balano funo de atenuao ea opacidade com o linear funo de atenuao:
$ ('# ClickMe'). Click (function () { $ ('# Book "). Animate ({ width: ['alternncia', 'swing'], height: ['alternncia', 'swing'], opacidade: "toggle" }, A funo de 5000, 'linear', () { $ (This) depois ('Animao <div> completa </ div>.').; }); });

Na segunda verso do . animate () , o mapa de opes pode incluir specialEasingpropriedade, que em si um mapa das propriedades CSS e seus correspondentes funes de atenuao. Por exemplo, para animar simultaneamente a largura usando o linear funo de atenuao ea altura usando o easeOutBounce funo de atenuao:
$ ('# ClickMe'). Click (function () { $ ('# Book "). Animate ({ width: 'alternncia', height: "toggle" }, { durao: 5000, specialEasing: { width: 'linear', height: 'easeOutBounce' }, function () {: completa $ (This) depois ('Animao <div> completa </ div>.').; }

}); });

Como observado anteriormente, um plugin necessrio para o easeOutBounce funo.

Notas adicionais:

Todos os efeitos jQuery, inclusive . animate () , pode ser desligado a nvel mundial atravs da criao jQuery.fx.off = true , o que efetivamente define a durao a 0.Para mais informaes, consulte jQuery.fx.off . Devido natureza de requestAnimationFrame () , voc nunca deve animaes fila usando um setInterval ou setTimeout loop. A fim de preservar os recursos da CPU, os navegadores que suportam requestAnimationFrame no ir atualizar animaes quando o guia de janela / no exibido. Se voc continuar a fila de animaes via setInterval ousetTimeout enquanto a animao est em pausa, todas as animaes em fila vai comear a jogar quando a janela / guia recupera o foco. Para evitar esse problema potencial, use o retorno de sua animao passada no loop, ou anexar uma funo aos elementos . fila ()para definir o tempo limite para comear a prxima animao.

Exemplos:

Exemplo: Clique no boto para animar a div com um nmero de propriedades diferentes.
<DOCTYPE html> <html> <head> <style> div { fundo - cor : # bca; width : 100px ; fronteira : 1px solid

Executar </ button> <div id = "block" > Ol! </ div> <script> / * Usando tipos de unidades mltiplas dentro de uma animao.

Demo: Exemplo: Anima propriedade deixou uma div com um valor relativo. Clique vrias vezes
nos botes para ver as animaes relativa na fila.
<! DOCTYPE

Demo: Exemplo: O primeiro boto mostra como uma animao unqueued funciona. Ela expande a
div com a largura de 90%, enquanto o tamanho da fonte est aumentando. Depois que a alterao font-size completo, a animao de fronteira comear. O segundo boto inicia uma animao tradicional encadeadas, onde cada animao ter incio assim que a animao anterior sobre o elemento foi concluda.
<! DOCTYPE

Animar Bloco 1 </ button> <boto id = "GO2" > Animate Block2 </ button> <boto id = "GO3" > Animate Ambos </ button> <boto id = "Go4" >

Demo: Exemplo: Anima bens deixados a primeira div e sincroniza os divs restantes, usando a
funo passo para definir suas propriedades deixou em cada etapa da animao.
<! DOCTYPE

Demo: Exemplo: Anima todos os pargrafos para alternar a altura e opacidade, completando a
animao dentro de 600 milissegundos.
$ ( "p" .) animar ({ "height" : "toggle" , }, "slow" ); "opacidade" : "toggle"

Exemplo: Anima todos a um estilo de pargrafo esquerda de 50 e opacidade de 1 (opaco,

visvel), completando a animao dentro de 500 milissegundos.
$ ( "p" .) animar ({ "esquerda" : "50" , }, 500 ); "opacidade" : 1

Exemplo: Um exemplo do uso de um 'alvio' funo para fornecer um estilo diferente de

animao. Isto s ir funcionar se voc tem um plugin que fornece esta funo de atenuao.Note, esse cdigo no far nada menos que o elemento de pargrafo est oculto.
$ ( "p" ). animar ({ "opacidade" : "show" }, "slow" , "easeIn" );

Exemplo: Anima todos os pargrafos para alternar a altura e opacidade, completando a

animao dentro de 600 milissegundos.
$ ( "p" .) animar ({ "height" : "toggle" , }, { durao : "lenta" "opacidade" : }); "toggle"

Exemplo: Anima todos a um estilo de pargrafo esquerda de 50 e opacidade de 1 (opaco,

visvel), completando a animao dentro de 500 milissegundos. Ele tambm vai faz-lo fora da fila, o que significa que ir iniciar automaticamente, sem esperar pela sua vez.
$ ( "p" .) animar ({ esquerdo : "50px" , opacidade : 1 }, { durao : 500 , fila : false });

Exemplo: Um exemplo do uso de um 'alvio' funo para fornecer um estilo diferente de

animao. Isto s ir funcionar se voc tem um plugin que fornece esta funo de atenuao.
$ ( "p" ). animar ({ "opacidade" : "show" }, { "durao" : "slow" ,

"flexibilizao" :

"easeIn"

});

Exemplo: Um exemplo do uso de uma funo de callback. O primeiro argumento um

array de propriedades CSS, o segundo especifica que a animao deve ter 1000 milissegundos para completar, os Estados terceiros o tipo de flexibilizao, eo quarto argumento uma funo de callback annimos.
$ ( "p" .) animar ({ altura : 200 , width : 400 , opacity : . 5 }, 1000 , "linear" , funo () { alerta ( "tudo feito" );

});