Accentsconagua

jQuery sucintamente jQuery Effects

Código
Share

Desactivar todos los métodos de efecto jQuery

Es posible desactivar todos los métodos de animación que proporciona jQuery simplemente configurando el valor de apagado propiedad a cierto.

    
Intenta animarme!

Cuando apagado se establece en cierto, Todos los métodos de efecto no se animarán y, en cambio, se ocultarán y se mostrarán de inmediato usando las reglas CSS pantalla: ninguna y bloqueo de pantalla. Puede volver a activar la animación pasando la apagado propiedad a falso valor.

    
 Intenta animarme!

Grokking the stop () Método de animación

A menudo es necesario detener una animación actualmente en curso antes de comenzar otra. Por ejemplo, cuando se utiliza la costumbre mouseenter y mouseleave eventos (o flotar() Método), puede activar involuntariamente un elemento que ya está animando debido a un mouseenter o mouseleave evento. Esto provoca una acumulación de animaciones en cola, lo que resulta en una interfaz lenta. Para evitar esto, simplemente use el detener() Método para detener la animación actual antes de comenzar una nueva..

    
 Pasa sobre mi!

Eliminar el detener() Métodos del código y mueva el mouse sobre el elemento varias veces para ver cómo ocurren las animaciones fantasma. Si se pasa continuamente el elemento en la página, se generará una animación de la animación, que generalmente no es el resultado deseado..

Notas: Además, es posible no solo detener la animación actual en la cola para el elemento seleccionado sino también toda la cola pasando la detener() Método de un parámetro de verdad. Esto detendrá efectivamente todas las animaciones en cola, activas e inactivas..

Determinar si un elemento está animando usando: animado

La costumbre :animado El filtro selector se puede usar para seleccionar elementos que se están animando actualmente. A continuación, uso este filtro de selección personalizado para agregar texto a una animación.

elemento.

Usando show (), hide (), y toggle (), sin animación

Utilizando la espectáculo(), esconder(), y palanca() los métodos con un parámetro harán que los elementos mostrados u ocultos se animen al cambiar las propiedades de CSS: altura, ancho, opacidad, margen, relleno. Es posible omitir animaciones para ocultar y mostrar elementos simplemente al no pasar ningún parámetro. Esto cambia la forma en que estos métodos ajustan la visibilidad de un elemento. Los elementos afectados simplemente aparecerán o desaparecerán sin ninguna animación ajustando el CSS monitor propiedad en cambio.

       
Haz clic en mí (ocultar animación)
 
Haz clic en mí (no ocultar ninguna animación)

Notas: Los métodos de jQuery. esconder(), espectáculo(), palanca(), deslizar hacia arriba(), bajar deslizándose(), slideToggle (), Cuando se usa en elementos que tienen un CSS monitor valor de en línea, será cambiado a bloqueo de pantalla durante la duración de la animación.

Grokking Animaciones secuenciales y no secuenciales

Es importante comprender la diferencia entre las animaciones que ocurren simultáneamente y las que ocurren en un orden secuencial a lo largo del tiempo. De forma predeterminada, cuando los métodos de efecto están encadenados, se agregan a una cola y cada efecto se produce uno tras otro.

    
 Animame! 
 
 Animame!

Utilizando la animar() Método, puede configurar animaciones para que se realicen de forma no secuencial o al mismo tiempo pasando todos los cambios de propiedades de CSS a un solo animar() método de llamada. En el código de abajo, el

Animará su ancho y borde ancho izquierdo al mismo tiempo..

    
Animame!

Animate () es la base, abstracción de bajo nivel

los animar() método es el método base que se utiliza para construir todas las animaciones preconfiguradas, p. ej.. esconder(), bajar deslizándose(). Proporciona la capacidad de cambiar (con el tiempo) los valores de las propiedades de estilo.

Esto es lo que necesita saber al usar este método.

  • Sólo se admiten las propiedades que toman valores numéricos. En otras palabras, no puede animar el valor de, digamos, el color de fondo propiedad (al menos no sin un plugin). Además, las propiedades que toman más de un valor como backgroundPosition no puede ser animado.
  • Puede animar las propiedades CSS usando em y% cuando corresponda.
  • Las animaciones relativas se pueden especificar usando "+ =" o "- =" delante del valor de la propiedad. Esto, por ejemplo, movería un elemento positiva o negativamente en relación con su posición actual.
  • Si especifica una duración de animación de 0, la animación establecerá inmediatamente los elementos en su estado final..
  • Como atajo, si un valor de palanca se pasa, una animación simplemente retrocede desde donde está y se anima a ese fin.
  • Todas las propiedades CSS establecidas a través de un solo animar() El método animará al mismo tiempo..

Grokking los métodos de desvanecimiento jQuery

Se deben mencionar tres conceptos al usar el fundirse(), fadeOut (), y desvanecerse hacia() metodos.

  • A diferencia de otros métodos de efectos, los métodos de atenuación solo ajustan la opacidad de un elemento. Se supone que al usar estos métodos de efecto, cualquier elemento que se desvanezca ya tiene una altura y una anchura.
  • Las animaciones de desvanecimiento desvanecerán los elementos de su opacidad actual..
  • Utilizando la fadeOut () El método desvanecerá un elemento de su opacidad actual, y luego, una vez que se haya desvanecido al 100%, cambiará la propiedad de visualización CSS del elemento a "ninguna".

Cada uno de los puntos mencionados anteriormente se ilustra en el siguiente código..
Código
×