Cómo crear animaciones personalizadas en jQuery
Las animaciones agregan varios efectos de embellecimiento para involucrar a los espectadores. JQuery admite una larga lista de métodos para realizar varias operaciones. El método jQuery animate () se utiliza para crear animaciones personalizadas en jQuery. Las propiedades de CSS son la principal parte interesada del método jQuery animate (). Estas propiedades pueden animarse a varias velocidades con varios valores. Esta publicación tiene como objetivo proporcionar pautas detalladas sobre animaciones en jQuery con los siguientes resultados de aprendizaje
- Mecanismo de trabajo del método animate ()
- Creación de animaciones personalizadas (usando ejemplos)
El método de cómo animar () funciona en jQuery
El método animate () utilizado para crear animaciones tiene la siguiente sintaxis.
$ (selector).animate (css, velocidad, devolución de llamada);La sintaxis proporcionada anteriormente tiene las siguientes instancias
- selector puede ser cualquier nombre de elemento, clase o ID de un elemento
- El CSS Parte del método animate () es obligatoria para las animaciones y la propiedad CSS que desea animar estaría en el CSS parte de la sintaxis
- El velocidad Define el duración de la animación y se puede establecer para "rápido", "lento" o en milisegundos (valor numérico)
- Por último, el llamar de vuelta es un parámetro opcional y se usa para mostrar algo de procesamiento después de que se realiza la animación
La sintaxis animate () procesa el valor numérico para alterar el CSS. Por ejemplo, la propiedad de fondo de fondo no se puede establecer utilizando el nombre de color, por lo tanto, la propiedad de color CSS no está incluida en las animaciones jQuery. Además, los nombres de las propiedades deben estar en caso de camello, como BorderColor, BorderWidth, etc.
Cómo crear animaciones personalizadas en jQuery
Como se discutió anteriormente, se practica el método animate () para crear animaciones jQuery. El método animado se puede usar en los siguientes escenarios
Múltiples animaciones a la vez: Todas las animaciones especificadas se realizan en un solo Go.
Animando las propiedades CSS una por una: En este caso, el método animate () se aplica de manera secuencial (una tras otra).
Animación del valor relativo: Por lo general, las propiedades de CSS se animan utilizando el valor actual de una propiedad CSS. Sin embargo, el método Animate () permite realizar animaciones dinámicas utilizando el fenómeno del valor relativo.
Practicaríamos las posibles formas en los próximos ejemplos.
Ejemplo 1: múltiples animaciones a la vez
Casi todas las propiedades de CSS se pueden animar utilizando el método Animate (). Este ejemplo ilustra el efecto de animación jQuery () utilizando múltiples propiedades CSS.
En el código anterior,
- Se animarán varias propiedades de CSS (ancho, altura y tamaño de fuente) del elemento Div
- la velocidad se establece para disminuir
Producción
Antes de la animación
Después de la animación
Ejemplo 2: uno tras otro
El efecto de animación se puede embellecer animando las propiedades CSS una por una. Echemos un vistazo a este método.
El código anterior practica la animación en un div elemento y se explica a continuación
- el relleno, altura, ancho y ancho de la frontera con varios valores de velocidad
- En primer lugar, el relleno será animado seguido por altura, ancho y ancho de la frontera
Producción
Antes de animar
Después de animar
Ejemplo 3: Valores relativos
Los valores relativos se generan utilizando dos operadores de asignación "+=" y "-=". El valor actual de la propiedad CSS se toma como valores de referencia y se generan nuevos valores sumando/restando algún valor numérico de ese valor actual.
En el código anterior,
- El ancho y la altura del div serán animados
- En cada clic (en nuestro caso), el ancho aumentará por 10px mientras que la altura se disminuirá 5px.
Producción
Antes de la animación,
Después de múltiples clics,
Ejemplo 4: Uso de valores de cadena
El método animate () solo acepta tres valores de cadena (esconderse, mostrar o alternar) para propiedades CSS. La propiedad de alternar puede animar la propiedad oculta para mostrar y viceversa.
En el código anterior, el Mostrar y alternar Las operaciones se realizan en anchura y altura respectivamente. Para esto, hemos usado el botón class = "palanca"Y class ="espectáculo" .
Producción
Antes de la animación,
Después de hacer clic en el botón de palanca, el ancho cambiará su estado (a oculto como está en el "espectáculo"Estado) como se puede ver en la siguiente imagen.
Si hace clic en el botón Show, entonces mostraría el DIV nuevamente.
Las animaciones tienen un papel clave en seguir cualquier contenido. Siguiendo estos ejemplos, habría aprendido la creación personalizada de animaciones en jquerry.
Conclusión
El método Animate () se usa para crear animaciones personalizadas en jQuery. El método Animate () se puede aplicar para animar múltiples propiedades CSS a la vez o también se puede aplicar de manera secuencial. Este artículo proporciona una guía detallada sobre la creación de animaciones personalizadas en jQuery. Conseguiría una comprensión del método animate () (partes interesada principal para animaciones). Además, se demuestran varios ejemplos que muestran la creación de animaciones personalizadas en jQuery.