Realização de efeitos de animação de página pela jQuery (exemplo de código)

Há muitos funções que podem ser usadas para implementar efeitos de animação, onde a função animate é uma das mais comuns. A seguir é uma breve introdução à forma de uso dessa função.

Forma básica da função animate

A forma básica de implementar efeitos de animação usando animate é:

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

onde {params} é um item obrigatório, que é um objeto que especifica os estilos CSS que o elemento deve ter após a execução do efeito de animação, speed e callback são opcionais, onde speed especifica a velocidade da animação, que pode ser um tipo de valor numérico (como1000 indica que a animação começa1s muda para o estilo especificado por params）、slow e fast. callback indica a função a ser executada após a conclusão da animação.

Exemplo de código:

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$("document").ready(function(){
 $("button").click(function(){
  $("div").animate({
   left:'250px',
   opacity:'0.5',
   height:'150px',
   width:'150px'
  });
 });
});
</script> 
</head>
<body>
<button>Start Animation</button>
<p>Por padrão, todos os elementos HTML têm uma posição estática e não podem ser movidos. Para manipular a posição, lembre-se de primeiro definir a propriedade de posição CSS do elemento para relativa, fixa ou absoluta!/p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Várias formas de atribuição das variáveis do objeto {params}

Sobre as variáveis do objeto {params}, podem ser atribuídas da seguinte forma.

Forma de valor absoluto

O exemplo de código fornecido acima atribui ao objeto params usando a forma de valor absoluto

Forma de valor relativo

Por exemplo, adicionando "+”“-”e outros.

Exemplo de código:

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

show, hide e toggle

Os valores das variáveis do objeto params, também podem ser atribuídos aos três valores acima, por exemplo, o código abaixo faz com que o conteúdo da tag div desapareça.

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

Aqui está tudo o que o autor compartilhou com vocês através de um exemplo de código animação de página usando jQuery. Espero que isso forneça uma referência útil e que vocês apoiem mais o Tutorial Grito.

Manual básico