Cómo emplear transiciones de clase con jquery ui efectos especiales en css3

Video: 13. jQuery: Clases de CSS

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

• Adición de una clase

• La eliminación de una clase

  Video: Html Css Simple CARD UI Design - Cool Css3 Image Hover Effects - Pure CSS Tutorials

• 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. (Puede encontrar el código completo para este ejemplo en la carpeta Capítulo 06Animations de la código descargable como ManageClasses.HTML.)

$ (Function () {$ ("#Cambio de clase") .click (function () {$ ("#Texto de ejemplo") .addClass ("Efecto", 1500, removeClass) -Retorno falsa -}) - Función removeClass () {$ ("#Texto de ejemplo") .removeClass ("Efecto", 1500, "easeOutBounce"ps"#SwitchClass") .click (function () {$ (".Normal") .switchClass ("Normal", "Efecto", 1500, "easeInElastic"ps".Efecto") .switchClass ("Efecto", "Effect2", 1500,"easeOutElastic"ps".Effect2") .switchClass ("Effect2", "Normal", 1500,"easeInOutElastic") -volver falsa -}) - $ ("#ToggleClass") .click (function () {$ (".Normal") .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 le asigna un controlador de eventos como se muestra. La función removeClass () es una llamada de retorno para el botón Agregar / Quitar clase. Después de la transición del controlador de eventos ha terminado, el código llama automáticamente 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

Video: Aprende HTML5 y CSS3 - La Animación en CSS - Video 25

El método addClass () realiza una adición directa de una clase. Usted indica el nombre de la clase a poner 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 del 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 múltiples 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 indica el nombre de la clase para eliminar como primer argumento y el nombre de la clase que agrega 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 indica 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 que tiene se centró en este ejemplo. Esta transición no puede ser animada. 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 toda la animación, pero ya ves que poco a poco se desvanecen en.

Cada una de estas llamadas de método incluye un retardo de tiempo de 1500 milisegundos. Este valor indica la cantidad de tiempo en el 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 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, se podría utilizar para crear una secuencia de validación para garantizar que los usuarios introducen los datos correctos para los campos de formulario que tienen información incorrecta.

Una animación también puede utilizar una función de aceleración. Esta función determina cómo aparecerá la animación en pantalla. La configuración por defecto es utilizar la función de giro flexibilización, lo que proporciona una transición suave desde el punto inicial hasta el punto final que la mayoría de los usuarios apreciarán (la animación se inicia un poquito 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 al menos un efecto diferente. Se puede ver una lista de las funciones de aceleración a jQuery. En este ejemplo se utiliza un número de diferentes funciones de aceleración de modo que se obtiene una idea de cómo funcionan.