JQuery Effects | Explicado

JQuery (si aún no está familiarizado con él) es una biblioteca JavaScript que contiene funcionalidades comúnmente utilizadas de una página web envuelta en diferentes funciones. Proporcionando así una interfaz de ahorro de tiempo para el desarrollador web. JQuery también proporciona una interfaz de ahorro de tiempo para crear animaciones y efectos de transición con una configuración cercana a ninguna (la mayoría de las funciones toman 2 argumentos en el máximo). jQuery contiene varios tipos de funciones, incluidos selectores, eventos y efectos. En esta publicación, vamos a discutir varios tipos de efectos proporcionados por jQuery, su sintaxis junto con su ejemplo

Configuración de HTML e incluyendo jQuery

Para comenzar a usar jQuery en su proyecto, debe incluirlo dentro de la etiqueta de script, estamos utilizando el jQuery alojado en Google con la siguiente línea:

Después de que esta línea se haya agregado al archivo HTML, podemos comenzar a escribir código jQuery

El método animate ()

El método animado que ofrece jQuery se utiliza para crear una animación muy básica pero atractiva en su página web. Esta función toma tres argumentos:

• Un parámetro requerido que es el animación
• A velocidad (opcional) Parámetro que define la velocidad de la animación
• A llamar de vuelta(parámetro opcional) que como el nombre indica es la función de devolución de llamada

Sintaxis del método animate ()

La sintaxis es bastante directa como ya se explicó anteriormente

[jquerry_selector $ ()].animate (parámetro, animation_speed, callback_function);

Para demostrar esto, vamos a crear un botón y un DIV en nuestro archivo HTML utilizando las siguientes líneas:

Hola! Yo soy Linuxbot
Haz click en mi!

Esto nos dará el siguiente resultado en su navegador:

Para el código jQuery, vamos a cambiar la opacidad del div hasta 0.7 Pero lo haremos en 2 segundos usando las siguientes líneas de código:

$ ("botón").hacer clic (function ()
$ ("div: último").animar(

Opacidad: "0.5 ",
,
2000
);
);

Como puede notar, hemos envuelto el animar método en un hacer clic Método del evento para que nuestra animación se invoque solo cuando hacemos clic en el botón. Al presionar el botón, obtenemos el siguiente resultado:

Como puede ver, pudimos animar la opacidad utilizando el método animado.

El método show () y hide ()

Estos métodos se utilizan para mostrar y ocultar elementos de una página web, la sintaxis de ambas funciones es casi idéntica como:

[jquerry_selector $ ()].show (animation_speed, callback_function);
[jquerry_selector $ ()].ocultar (animation_speed, callback_function);

Para demostrar esto, escriba las siguientes líneas en nuestro archivo HTML:

Puedo desaparecer y reaparecer
Esconder
Espectáculo

Verá la siguiente página web en su navegador web:

Como puede ver, tenemos un div con algún texto dentro de él junto con dos botones que usen estos esconder y espectáculo Animaciones respectivamente.

Para la parte jQuery, use las siguientes líneas de código en su archivo JavaScript:

$ ("#Show").hacer clic (function ()
$ ("#demo").Show (2000);
);
$ ("#escondite").hacer clic (function ()
$ ("#demo").Hide (2000);
);

Aviso: Hemos pasado el tiempo como 2 segundos, de lo contrario, el cambio será instantáneo y no obtendremos un efecto de animación.

Ejecute el archivo y haga clic en el botón Hide y obtendrá el siguiente resultado:

Como puede ver, obtenemos una animación atractiva, el siguiente paso es probar la animación del programa haciendo clic en el botón Show. Entonces, haga clic en el botón Mostrar y obtendrá los siguientes resultados:

Como puede ver, obtenemos una animación suave dehide \ show

El método de diapositivas ():

También podemos obtener una transición de diapositivas suave con la biblioteca jQuery. Obtenemos tres funciones para la animación de diapositivas, son a saber:

• deslizar hacia arriba()
• bajar deslizándose()
• slidetoggle ()

Para demostrar esto, vamos a implementar un método slidEtoggle (), use las siguientes líneas en el archivo HTML:

Puedo desaparecer y reaparecer


Haz clic en mí para alternar la diapositiva

Para el código jQuery, use las siguientes líneas en el archivo JavaScript:

$ ("#toggle").hacer clic (function ()
$ ("#demo").slidetoggle ("lento");
);

Obtiene el siguiente resultado en la pantalla:

Como puede ver, tenemos una animación de palanca de diapositivas rápida y suave usando jQuery. Además de estos, JQuery proporciona un montón de otros métodos de animación que puede probar.

Conclusión

JQuery viene con algunos efectos atractivos y métodos de animación que realmente hacen que una página web se destaque. JQuery se centra en hacer que la codificación de varios métodos, selectores y animación concise para el desarrollador web. Es por eso que algunas de las animaciones más utilizadas están envueltas en diferentes funciones que se pueden invocar siempre que el usuario desee. Hoy, en esta publicación, repasamos cómo usar jQuery para implementar algunos de los efectos de animaciones en nuestra página web.