Introducción a jQuery Effects

jQuery es una de las bibliotecas javascript más populares que está diseñada para simplificar el DOM HTML, es decir, las propiedades del modelo de objetos del documento, como la manipulación y el recorrido del árbol. También se simplifican otras propiedades, como el manejo de eventos, Ajax y animación CSS. Es una biblioteca de código abierto y gratuita que generalmente se utiliza en el 73% de los 10 millones de sitios web que se utilizan actualmente. Las características principales de jQuery incluyen selectores basados ​​en elementos DOM, manipulación y recorrido que hacen que trabajar en jQuery sea mucho más fácil y conveniente. En este tema, vamos a aprender sobre jQuery Effects.

Se utiliza para proporcionar una interfaz de aspecto muy simple para hacer varios tipos de efectos sorprendentes. Estos métodos permiten usar y aplicar rápidamente los efectos de características más utilizados junto con configuraciones mínimas. El comando para mostrar y ocultar elementos es más o menos lo mismo que cualquiera que esté dispuesto a verlos esperaría. El comando Show () se usa para mostrar los elementos en un conjunto totalmente envuelto y el comando hide () se usa para ocultarlos.

Diferentes métodos de efecto jQuery:

Aquí discutimos algunos tipos diferentes de métodos de efecto jQuery

1) Animar ()

El método animado se usa para realizar una animación personalizada para un conjunto de propiedades CSS. Este método se usa para cambiar el estado del elemento de un estado a otro junto con los estilos CSS. El valor de la propiedad se cambia gradualmente de modo que se pueda lograr un efecto animado. Lo que debe tenerse en cuenta es que solo los valores numéricos pueden ser animados, como el margen: 40px. Por otro lado, los valores de las cadenas no se pueden animar, como el color de fondo: verde. Esto nuevamente viene con una excepción para cadenas como show, hide y toggle.

Sintaxis

(selector).animate((styles), duration, easing, callback)

Ejemplo

$("label").click(func()(
$("#box").animate((height: "100px"));
));

2) Retraso ()

Como su nombre indica, este se usa para establecer el retraso de todas las funciones que se ponen en cola sobre los elementos seleccionados.

Sintaxis

$(selector).delay(duration, NameOfQueue)

Ejemplo

$("label").click(func()(
$("#div1").delay("fast").fadeOut();
$("#div2").delay("slow").fadeIn();
));

3) fadeToggle ()

Esta función se usa para alternar entre las funciones de fundido de entrada y salida en diferentes cuadros. Si algún elemento se desvanece, esta función fadeToggle () se puede usar para desvanecerlo. Los elementos que están en forma oculta no se mostrarán como parte de este método.

Sintaxis

$(selector).fadeToggle(duration, easing, callback)

Ejemplo

$("label").click(func()(
$("#box").fadeToggle();
));

4) fadeTo ()

Este método se utiliza para cambiar la opacidad de todos los

es decir, elementos relacionados con el párrafo gradualmente. La opacidad especificada en este contexto se refiere a la opacidad del efecto cambiante.

Sintaxis

$(selector).fadeTo(duration, opacity, easing, callback)

Ejemplo

$("label").click(func()(
$("p").fadeTo(100, 0.9);
));

5) clearQueue ()

Este método es el mismo que sugiere el nombre. Esto se utiliza para borrar la cola y elimina todos los elementos de la cola que no se han ejecutado. La función completará su ejecución una vez que haya comenzado a ejecutarse. Esto está relacionado con dos métodos, a saber. queue () y dequeue ().

Sintaxis

$(selector).clearQueue(NameOfQueue)

Ejemplo

$("label").click(func()(
$("box").clearQueue();
));

6) terminar ()

Este método en jQuery se utiliza para finalizar o finalizar el animador actualmente en ejecución, ya que se utiliza para detener todas las animaciones que se están ejecutando actualmente y se utiliza para eliminar todas las animaciones en cola. También se utiliza para completar todas las animaciones para una gama variada de elementos seleccionados. Este método es similar a métodos como .stop que tiene ambos parámetros verdaderos. La principal diferencia entre este método y el acabado es que el método de acabado se usa para detener y pausar los tipos de propiedad del elemento CSS de todas las animaciones en cola.

Sintaxis

$(selector).finish(NameOfQueue)

Ejemplo

$("#complete").click(func()(
$("div1").finish();
));

7) dequeue ()

Este método se usa para eliminar la siguiente función de la cola y luego se usa para ejecutar la función. Una cola es una o más funciones que están en la tubería esperando ser ejecutadas. Este método de extracción se utiliza junto con el método de la cola. Un elemento puede tener varias colas. La cola fx es la más común, que también es la cola predeterminada.

Sintaxis

$(selector).dequeue(NameOfQueue)

Ejemplo

$("label").queue(func()(
$("").css("background-color", "black");
$("div").dequeue();
));

8) slideDown ()

Este es otro método útil en jQuery que se utiliza para deslizar hacia abajo o mostrar las listas de elementos seleccionados. El punto a tener en cuenta aquí es que también funciona en los elementos que están en formato oculto y el tipo de visualización se muestra como ninguno en el caso de CSS, pero la visibilidad no tendrá que estar oculta.

Sintaxis

$(selector). slideDown (duration, easing, callback)

Ejemplo

$("label").queue(func()(
$("p").slideDown();
));

9) slideUp ()

El método slideUp () se utiliza para ocultar todos los

elementos seleccionados Los elementos que están en forma oculta no se mostrarán en absoluto. Esto, por lo tanto, no afecta el diseño de la página.

Sintaxis

$(selector).slideUp(duration, easing, callback)

Ejemplo

$("label").queue(func()(
$("p").slideUp();
));

10) slideDown ()

A diferencia del método slideUp (), este método se utiliza para mostrar todos los elementos ocultos.

elementos. Este método slidedown () funciona en todos los elementos que también están relacionados con los métodos ocultos en el caso de los métodos jQuery y el nombre también se muestra en el CSS pero la visibilidad no está oculta.

Sintaxis

$(selector).slideDown(duration, easing, callback)

Ejemplo

$("label").queue(func()(
$("p").slideDown();
));

11) Alternar ()

Este método se usa para alternar entre mostrar y ocultar varios

elementos basados. Este método se utiliza para verificar la visibilidad de los elementos. El método show () se usa para ejecutarse incluso cuando el elemento está oculto. Hide () se ejecuta incluso cuando el elemento es visible. Los métodos de mostrar y ocultar en combinación crean un efecto de alternar y, por lo tanto, el método alternar ().

Sintaxis

$(selector).toggle(duration, easing, callback)

Ejemplo

$("label").queue(func()(
$("p").toggle();
));

12) slideToggle ()

Este método se usa para alternar entre las funciones slideUp () y slideDown () para todos los elementos basados ​​en el párrafo. Este método se utiliza para verificar los elementos seleccionados para visibilidad. SlideDown () es la función que se puede ver ejecutándose cuando el elemento está oculto. Por el contrario, el elemento slideUp () es el que debe ejecutarse si el elemento es visible.

Sintaxis

$(selector).slideToggle(duration, easing, callback)

Ejemplo

$("label").queue(func()(
$("p").slideToggle();
));

jQuery nos permite agregar los efectos en la página web al proporcionar numerosas cantidades de funciones que se pueden poner en diferentes selectores. Es sobre usted, cómo desea que sus sitios web se vean más llenos de efectos. Espero que les haya gustado nuestro artículo. Estén atentos a nuestro blog para más artículos como estos.

Artículos recomendados

Esta es una guía de jQuery Effects. Aquí hemos discutido los diferentes tipos de métodos de efectos jQuery con sintaxis y ejemplo. También puede consultar el siguiente artículo para obtener más información:

  1. Usos de JQuery
  2. Alternativas de jQuery
  3. Comandos de consulta de MySQL
  4. ¿Qué es el procedimiento en SQL?
  5. jQuery querySelector

Categoría:

Desarrollo de software