uno. Mostrar, esconder
El método de visualización en jQuery es: .show () y el método oculto es: .hide (). Cuando no hay parámetros, es difícil de mostrar y ocultar el contenido.
$ ('. $ ('.En los métodos .show () y .Hide (), se puede pasar un parámetro, que controla la velocidad en milisegundos (1000 milisegundos es igual a 1 segundo). También es rico a velocidad constante para aumentar y disminuir, así como el cambio de transparencia.
$ ('. Show'). Click (function () {$ ('#box'). show (1000); // tardó 1 segundo en mostrar}); $ ('.Además de usar milisegundos directamente para controlar la velocidad, JQuery también proporciona tres cadenas de parámetros de velocidad preestablecidos: lento, normal y rápido, correspondiente a 600 milisegundos, 400 milisegundos y 200 milisegundos, respectivamente.
$ ('#box'). show ('lento'); // 600 milisegundos $ ('#box'). Show ('normal'); // 400 milisegundos $ ('#box'). Show ('fast'); // 200 milisegundosNota: Ya sea que pase milisegundos o pase cadenas preestablecidas, si accidentalmente pasa un error o pasa una cadena vacía. Luego tomará el valor predeterminado: 400 milisegundos.
Use las funciones de devolución de llamada de .show () y .Hide () para lograr los efectos de animación de cola.
(1) Llámate a ti mismo usando el nombre de la función
$ ('.(2) Use argumentos.callee para llamar a funciones anónimas
$ ('.Cuando usamos .show () y .Hide (), si necesitamos un botón para cambiar, necesitamos hacer algunos juicios condicionales. Y jQuery nos proporciona un método separado con funciones similares: .toggle ().
$ ('.. Toggle'). Click (function () {$ (this) .toggle ('lento');});dos. JQuery de deslizamiento y desplazamiento proporciona un conjunto de métodos para cambiar la altura de los elementos: .slideUp (), .slididown () y .slidetoggle (). Como su nombre lo indica, se encoge hacia arriba (pergaminos) y se expande hacia abajo (diapositivas).
$ ('.Nota: Los efectos de deslizamiento y desplazamiento son los mismos que la pantalla y los efectos ocultos, y tienen los mismos parámetros.
tres. Fade In, Fade Out
JQuery proporciona un conjunto de métodos específicamente para cambios de transparencia: .FadeIn () y .fadeOut (), que representan Fade In y Fade Out respectivamente, y por supuesto también hay un método de conmutación automático: .FadeToggle ().
$ ('.Los tres métodos de transparencia anteriores solo pueden ser de 0 a 100, o de 100 a 0. Si queremos establecer el valor especificado, no hay forma. JQuery proporciona un método .fadeto () para resolver este problema.
$ ('.. Toggle'). Click (function () {$ ('#box'). fadeto ('lento', 0.33); //0.33 significa que el valor es 33%});PS: el número de valores es de 0 a 1, correspondiente al porcentaje
Cuatro. Animación personalizada
JQuery proporciona varios aspectos de animación fijos simples y de uso común que usamos. Pero a veces, estas simples animaciones no pueden satisfacer nuestras necesidades más complejas. En este momento, JQuery proporciona un método .animate () para crear nuestras animaciones personalizadas para cumplir con los requisitos más complejos y cambiantes.
$ ('.Nota: Un cambio de CSS es un efecto de animación. En el ejemplo anterior, ya hay cuatro cambios CSS, y se ha logrado el efecto del movimiento sincrónico de múltiples animaciones.
Solo hay un parámetro que debe pasarse, que es un objeto con un estilo CSS de par de valores clave. Hay dos parámetros opcionales, a saber, las funciones de velocidad y devolución de llamada.
$ ('.Hasta ahora, hemos creado animaciones con posiciones fijas que aún están. Si desea implementar imágenes de movimiento de bits en los estados de movimiento, debe usar animaciones personalizadas y combinarlas con la función de posicionamiento absoluto de CSS.
$ ('.PS: el objeto de referencia debe establecerse primero en CSS y el posicionamiento absoluto
En la animación personalizada, cada movimiento de inicio debe estar en la posición inicial o en el estado inicial, y a veces queremos animarlo a través de la posición o estado actual. JQuery proporciona las funciones de agregar y disminuir animaciones personalizadas.
$ ('.cinco. Método de animación de cola
Ya podemos implementar la animación de cola antes. Si es el mismo elemento, se puede llamar en secuencia o concatenado. Si es un elemento diferente, puede usar la función de devolución de llamada. Pero a veces hay demasiadas animaciones de cola, y la legibilidad de la función de devolución de llamada se reduce considerablemente. Para este fin, JQuery proporciona un conjunto de métodos utilizados específicamente para animaciones en cola.
// conectado no se puede implementar en la cola de secuencia
$ ('#box'). slideUp ('lento'). slideown ('lento'). css ('fondo', 'naranja');
Nota: Si el método de animación está animado, la ligadura se puede colocar en la secuencia, mientras que el método .css () no es un método de animación y lo será antes de que la cola pase por primera vez. Luego, la función de devolución de llamada del método de animación se puede usar para resolver el problema.
// Use la función de devolución de llamada para forzar la cola del método .css () a .slididown () después de $ ('#box'). SlideUp ('Slow'). Slideown ('Slow', function ({$ (this) .css ('fondo', 'naranja');});Pero si este es el caso, cuando hay muchas animaciones en cola, la legibilidad no solo disminuirá, sino que el método de animación original no es lo suficientemente claro. Entonces, nuestra idea es que cada operación es su propio método independiente. Entonces JQuery proporciona un método similar a una función de devolución de llamada: .queue ().
// Use el método .queue () para simular el método de animación después de seguir el método de animación $ ('#box'). SlideUp ('lento'). Slideown ('lento'). Queue (function () {$ (this) .css ('fondo', 'naranja');});Ahora, queremos continuar agregando una animación oculta al método .queue (), pero descubrimos que era imposible implementarla. Esto es causado por la función .queue (). Solución: la función de devolución de llamada de JQuery .Queue () puede pasar un parámetro, que es la siguiente función. Llame al método Next () al final para ejecutar la animación de cola.
// use el siguiente parámetro para implementar la animación de cola de llamadas continuas $ ('#box'). SlideUp ('Slow'). Slideown ('Slow'). Queue (function (Next {$ (this) .css ('fondo', 'naranja'); next ();}). Escondido ('lento');PS: .Queue () El método también tiene otra función, que es obtener la longitud de la cola de animación actual (no demostrada en detalle)
JQuery también proporciona un método funcional para limpiar las colas: .Clearqueue (). Póngalo en una función de devolución de llamada en cola o método .queue (), y las colas restantes que se ejecutan se pueden eliminar.
// Limpie la cola de animación $ ('#box'). Slideown ('lento', function () {$ (this) .clearqueue ()}); seis. Métodos relacionados con la animación
Muchas veces, es necesario dejar de ejecutar animaciones, y jQuery proporciona un método .stop () para esto. Tiene dos parámetros opcionales: .stop (Clearqueue, gotoend); Clearqueue pasa un valor booleano, que representa si eliminar la cola de animación no ejecutada, y Gotoend representa si saltar directamente la animación ejecutiva al último estado.
$ ('. $ ('#box'). Animate ({'altura': '300px'}, 1000); $ ('.// Nota: El primer parámetro indica si cancelar la animación de la cola, el valor predeterminado es falso. Si el parámetro es verdadero, la animación de cola posterior se cancelará cuando haya una animación de cola. El segundo parámetro indica si alcanza el final de la animación actual, y el valor predeterminado es falso. Si el parámetro es verdadero, alcanzará el final inmediatamente después de detenerse. Puedes copiarlo y experimentarlo tú mismo.
A veces, al ejecutar animaciones o animaciones en cola, hay un retraso antes de la moción, y jQuery proporciona el método .delay () para esto. Este método puede establecer un retraso antes de la animación o agregarlo en el medio de la animación en cola.
// El retraso de inicio es de 1 segundo, el retraso central es de 1 segundo. $ ('. Animate'). Click (function () {$ ('#box'). Delay (1000) .animate ({'Left': '300px'}, 1000); $ ('#box'). Animate ({'Bottom': '300px'}, 1000); $ ('#box'). 'ancho': '300px'}, 1000);argumentos.callee se ejecuta en qué función representa qué función. Generalmente utilizado en funciones anónimas. En funciones anónimas, a veces necesita llamarse a sí mismo, pero debido a que es una función anónima, no tiene nombre y es ajustable. En este momento, argumentos.callee se puede usar en lugar de funciones anónimas
// ejecutar recursivamente a sí mismo, infinito bucle ejecutar $ ('#box'). SlidEtoggle ('lento', function () {$ (this) .slidetoggle ('lento', argumentos.callee);});La propiedad $ .fx.Off puede desactivar todos los efectos de animación.
$ .fx.off = true; // El valor predeterminado es falso
Todos se entienden.
Lo anterior es el Código JQuery Animation Effect Compartir que le presenta el editor. Espero que te sea útil.