Cómo trabajar con la flexibilización avanzada en jQuery UI efectos especiales en css3

Muchas aplicaciones requieren que mostrar u ocultar elementos CSS3 en diferentes puntos de la ejecución de la aplicación. Puede ser algo tan simple como no tener el elemento en ese momento (por ejemplo, una barra de progreso). En la mayoría de los casos, lo único que desea el elemento de que se fuera. Si el usuario se da cuenta de la desaparición es irrelevante a la funcionalidad de la aplicación.

Sin embargo, es posible que desee que el usuario note el cambio en algunas situaciones. Por ejemplo, un usuario podría seleccionar una opción que hace que otras opciones inaccesible. El uso de un efecto especial para hacer esto más notable puedan ser de utilidad.

La librería jQuery UI ofrece varios medios para controlar la visibilidad de los elementos de una manera animada. El hecho de que el elemento se muestra o se oculta, no cambia, pero la forma en que la aplicación muestra u oculta lo hace.

Por ejemplo, podría utilizar un efecto de diapositivas para mostrar que un nuevo elemento se ha añadido debido a una opción que el usuario ha hecho. Hay cuatro métodos principales de los elementos mediante el uso de esta técnica la animación:

• Utilice un efecto donde el elemento cambia visualmente.

• Mostrar un elemento oculto mediante el uso de un efecto.

• Ocultar un elemento mediante el uso de un efecto.

• Alternar la visibilidad de un elemento mediante el uso de un efecto.

El efecto que elija para trabajar con un elemento controla cómo jQuery UI maneja visualmente. Por ejemplo, un efecto explotar hace que el elemento de romper en pedazos, con cada pieza que se mueve en una dirección fuera de la pantalla diferente. Las siguientes palabras clave definen los tipos de efectos que se pueden utilizar (se puede encontrar detalles adicionales en jQuery):

ciegobotepresillasoltarexplotarfadeplegarpunto culminantesoplolatirescalasacudirtamañodiapositivatransferencia

Además del efecto real, puede utilizar una función de aceleración para que el efecto más pronunciado o especial de otras maneras. Usted puede ver una lista de aliviar funciones en jQuery.

El siguiente ejemplo muestra cómo utilizar los cuatro enfoques para trabajar con la visibilidad del elemento. En realidad, hay cuatro botones que se utilizan para el ejemplo, pero los límites de visibilidad elemento a ver solo tres a la vez porque no se puede mostrar un elemento que ya está visible u ocultar un elemento que ya está oculto.

Puedes encontrar el código completo para este ejemplo en el Capítulo 06 carpeta de animaciones del código descargable como Visibility.HTML.

$ (function () {// No pierda de vista la state.var escondido elemento oculto = false -.. $ ("# Efecto"), haga clic en (function () {$ ("# sampletext") efecto ("rebote", " easeOutBounce ", 1500) -}) - $ (" # Show "), haga clic en (function () {Hidden = false -. $ (" # sampletext ") espectáculo (." slide ", 1500, ChangeButtonState) -}) - $ ("#Hide"), haga clic en (function () {Hidden = true - $ ("# sampletext") ocultar ("explotar", 1500, ChangeButtonState) -.}) -.. $ ("# Toggle") haga clic (función () {Hidden = Ocultos - $ ("# sampletext") alternar ("escala", {ciento: 0}, 1500, ChangeButtonState) -.}) - // Establecer el estado del botón como needed.function ChangeButtonState () { si (Oculta) {$ ("# Show") attr (, falsa "oculto") -.. $ ("# Hide") attr ("oculto", true) -} else {$ ("# Show"). attr ("oculto", true) - $ ("# Hide") attr ("oculto", false) -.}}})

El ejemplo comienza creando una variable, Oculto, para realizar el seguimiento del estado del elemento. Cuando el elemento se oculta, se mostrará el botón Mostrar. Del mismo modo, cuando se muestra el elemento, se muestra el botón Ocultar así. Esta funcionalidad se controla mediante una función de devolución de llamada, ChangeButtonState ().

El código para el botón Efecto simplemente realiza un efecto sobre el elemento, sampletext. En este caso, se ve el efecto rebote. El rendimiento de este efecto es modificado por el easeOutBounce función de aceleración, y toda la animación dura 1500 milisegundos.

La visibilidad real no ha cambiado, pero el usuario ve una animación del elemento en pantalla. Usted podría utilizar esta técnica para señalar los campos que tienen información incorrecta o requieren información adicional. Por supuesto, también puede utilizarlo para realizar cualquier otro tipo de animación simple deseada - incluyendo una animación en bucle, donde la animación se repite constantemente.

El Show y Ocultar botón código funcione mano a mano para ocultar o mostrar sampletext. El botón Mostrar utiliza el efecto de deslizamiento, y el botón Ocultar utiliza el efecto de explotar. Ambos realizan la tarea más de 1.500 milisegundos.

Tenga en cuenta que los dos controladores de eventos marcan el estado de Oculto directamente porque el Estado es un absoluto basado en la tarea que realiza el botón. Los controladores de eventos también proporcionan ChangeButtonState () como una función de devolución de llamada. La animación llama a esta función después de la animación ha terminado de ajustar correctamente el estado de botón.

El botón Alternar funciona como una combinación de mostrar y ocultar los botones - el controlador de eventos, simplemente cambia el estado visual sampletext. Debido a que el estado no se conoce, el valor de Hidden también se alterna. En este caso, el controlador de eventos llama el efecto de escala, lo que requiere un argumento adicional en forma de porcentaje.

Asegúrese de comprobar los efectos de determinar si requieren argumentos adicionales - la mayoría no. Cuando la animación completa, la aplicación llama ChangeButtonState () para volver a configurar la interfaz de usuario según sea necesario.