Implementar efectos de animación en la página a través de jquery (ejemplo de código)

Hay muchos funciones que se pueden usar para implementar efectos de animación, donde la función animate es una de las más comunes. A continuación, se ofrece una breve introducción sobre cómo usar esta función.

Forma básica de la función animate

La forma básica de implementar efectos de animación mediante animate es:

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

donde {params} es un elemento obligatorio, que es un objeto que indica los estilos CSS que deseamos que tenga el elemento después de que se ejecute el efecto de animación, speed y callback son opciones, donde speed indica la velocidad de ejecución de la animación, y puede ser un tipo de valor numérico (como1000 indica que la animación se1s se convierte en el estilo especificado por params）、slow y fast. callback indica la función que se debe ejecutar al finalizar la animación.

Ejemplo 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>Inicio de Animación</button>
<p>Por defecto, todos los elementos HTML tienen una posición estática y no pueden ser movidos. Para manipular la posición, recuerda primero establecer la propiedad de posición CSS del elemento en relativa, fija o absoluta!/p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Varias formas de asignación de variables del objeto {params}

Sobre las variables del objeto {params}, se pueden asignar en la siguiente forma.

Forma de valor absoluto

El código de ejemplo proporcionado en el texto anterior asigna al objeto params valores en forma de valor absoluto

Forma de valor relativo

Por ejemplo, podemos agregar "+”“-”y otros.

Ejemplo de código:

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

show, hide y toggle

Los valores de variables del objeto params, también podemos asignarlos a los tres valores anteriores, por ejemplo, el siguiente código hace que el contenido de la etiqueta div desaparezca.

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

La animación de página mediante jQuery que se menciona aquí y que acompaña el código de ejemplo es todo lo que el editor ha compartido con ustedes, esperando que les sirva de referencia y que apoyen más a la tutoría de alarido.

Tutoriales básicos

Te gustaría que