Cómo emplear transiciones de clase con jQuery UI efectos especiales en css3

Utilización de clases de CSS3 puede tener un efecto interesante en la presentación de la información en pantalla. jQuery UI permite utilizar clases CSS para realizar animaciones de cuatro maneras diferentes:

• Adición de una clase

• Extracción de una clase

• El cambio entre las clases

• Alternar una clase

En los cuatro casos, el efecto no se produce inmediatamente - usted proporciona un retardo de tiempo para hacer la transición entre presentaciones bastante lenta para que el usuario vea. (Usted puede encontrar el código completo para este ejemplo en el Capítulo 06 carpeta de animaciones del código descargable como ManageClasses.HTML.)

$ (function () {$ ("# ChangeClass"), haga clic en (function () {$ ("# sampletext") addClass ("Efecto", 1500, removeClass) -Retorno falsa -..}) - Función removeClass () { $ ("# sampletext") removeClass ("Efecto", 1500, "easeOutBounce") -.} -.. $ ("# SwitchClass"), haga clic en (function () {$ (". Normal") switchClass ("Normal" , "Efecto", 1500, "easeInElastic") -. $ (". Efecto") switchClass ("Efecto", "Effect2", 1500, "easeOutElastic") -. $ (". Effect2") switchClass ("Effect2" , "Normal", 1500, "easeInOutElastic") - return false -}) -. ". Normal". $ ("# ToggleClass"), haga clic en (function () {$ () toggleClass ("Efecto", 1500) -Retorno falsos})})

Hay tres botones en la parte frontal de la página: Añadir / quitar Clase, cambiar entre las clases, y alternar entre las clases. Cada uno de estos botones se asigna un controlador de eventos como se muestra. La función removeClass () es una devolución de llamada para el botón Add / Remove Class. Después de la transición para el controlador de eventos ha terminado, el código llama automáticamente a esta función.

Todas estas animaciones funcionan exactamente de la misma manera - que añadir o eliminar clases hacia o desde el elemento especificado. En este caso, una

El método addClass () realiza una adición directa de una clase. Usted provee el nombre de la clase para agregar como primer argumento. Si la clase ya existe para el elemento, no pasa nada. Del mismo modo, el método removeClass () elimina la clase especificada desde el elemento. Una vez más, usted indica el nombre de la clase para eliminar como primer argumento.

El método switchClass () cambia entre una clase y otra. Se puede utilizar para crear varias transiciones. Por ejemplo, este ejemplo muestra cómo cambiar entre tres transiciones. La clase normal se sustituye con efecto, Efecto se reemplaza con Effect2 y Effect2 se reemplaza con Normal.

En consecuencia, se ve las animaciones rotan entre tres clases. Usted provee el nombre de la clase para eliminar como primer argumento y el nombre de la clase permite añadir como segundo argumento.

El método toggleClass () añade o elimina una clase dependiendo de si la clase se asigna al elemento. En este caso, el código añade Efecto cuando sampletext carece de ella y elimina Efecto cuando sampletext tiene que aplicarse. Usted provee el nombre de la clase para alternar como primer argumento.

jQuery UI no puede animar a todos los estilos. Por ejemplo, hay una transición entre tener el texto justificado a la izquierda y hacer que se centró en este ejemplo. Esta transición no puede ser animado. Lo que se ve es que el efecto se produce al final de la animación.

Además, algunos efectos son animados, pero no se animan en la forma en que se podría esperar. Por ejemplo, si un elemento cambia de color, el nuevo color se utiliza en la animación, pero ver que se desvanecen poco a poco.

Cada una de estas llamadas de método incluye un retardo de tiempo de 1500 milisegundos. Este valor indica la cantidad de tiempo en que se produce la animación. La configuración por defecto es de 400 milisegundos, lo cual es un poco difícil para la mayoría de la gente a ver. Sin embargo, este argumento es opcional, y usted no tiene que suministrar a hacer el trabajo de método.

El método addClass () incluye otro argumento opcional, una función de devolución de llamada. La función de devolución de llamada se llama cuando la animación ha terminado. El ejemplo utiliza la función de devolución de llamada para cambiar el efecto. Sin embargo, una devolución de llamada podría ser utilizado para cualquiera de una serie de propósitos. Por ejemplo, puede utilizarlo para crear una secuencia de validación para asegurar que los usuarios introducen los datos correctos para los campos de formulario que tienen información incorrecta.

Una animación también puede utilizar un función de aceleración. Esta función determina cómo aparece la animación en pantalla. La configuración por defecto es utilizar la función de aceleración swing, que proporciona una transición suave desde el punto de inicio hasta el punto final que la mayoría de los usuarios apreciarán (la animación comienza un poco lento, se vuelve un poco más rápido y más lineal en el medio, y luego termina un poco lento).

Sin embargo, es posible que desee un poco más de dinamismo o por lo menos un efecto diferente. Usted puede ver una lista de aliviar funciones en jQuery. En este ejemplo se utiliza un número de diferentes funciones de aceleración para que te hagas una idea de cómo funcionan.