efeitos jQuery - Animação
jQuery animate () método permite criar animações personalizadas.
jQuery animações - animado () Método
jQuery animate () método é usado para criar animação personalizada.
sintaxe:
parâmetro obrigatório params define a formação de propriedades CSS animação.
O parâmetro de velocidade opcional especifica a duração do efeito. Pode levar os seguintes valores: "lento", "rápido", ou milissegundos.
O parâmetro de retorno opcional é o nome da função executada após a conclusão.
O exemplo seguinte demonstra um método simples animado aplicação (). É <div> elemento para a direita para mover 250 pixels:
 | Por padrão, todos os elementos HTML têm uma posição estática e não pode se mover. Para a posição de funcionamento, lembre-se o primeiro atributo posição elemento CSS definido como relativo, fixo ou absoluto! |
|---|
jQuery animate () - que opera várias propriedades
Por favor note que o processo de gerar a animação pode usar várias propriedades:
Exemplos
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
tente »
| Você pode animar () método para operar todos os atributos de CSS? Sim, quase! No entanto, a coisa importante a lembrar: Ao usar animado (), escreva todos os nomes de atributos devem usar a notação camelo, por exemplo, deve ser utilizado em vez de paddingLeft padding-esquerda, em vez de usar marginRight margin-right, etc. . Ao mesmo tempo, a animação cor não está incluído no núcleo biblioteca jQuery. Se você precisa gerar animação da cor, você precisa jquery.com baixar a cores Animações plugin. |
|---|
jQuery animate () - a utilização de valor relativo
Você também pode definir o valor relativo (o valor é relativo ao valor atual do elemento). Precisam preceder o valor com o + = ou - =:
Exemplos
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
tente »
() JQuery animar - utilizar o valor predefinido
Você pode até mesmo colocar o valor da propriedade de animação com "show", "esconder" ou "alternância":
jQuery animate () - Usando a função Queue
Por padrão, jQuery fornece recursos de enfileiramento para a animação.
Isto significa que se você escrever mais de um após o outro chamada animado (), jQuery irá criar uma chamada de método estes fila "interno". Em seguida, um por um para executar estes animar chamadas.
exemplo 1
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");
});
tente »
O exemplo a seguir do elemento <div> é deslocado para a direita 100 pixels, e, em seguida, aumentar o tamanho do texto:
exemplo 2
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
tente »