Cómo trabajar con la flexibilización avanzada en jquery ui efectos especiales en css3
Muchas aplicaciones requieren que permite mostrar u ocultar elementos de 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 que se vaya. Si el usuario se da cuenta de la desaparición es irrelevante para la funcionalidad de la aplicación.
Sin embargo, es posible que desee el usuario note el cambio en algunas situaciones. Por ejemplo, un usuario puede 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 biblioteca jQuery UI proporciona varios medios de controlar la visibilidad de elemento 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, se puede usar 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 elementos mediante el uso de esta técnica animación:
Utilizar un efecto en el que 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 la interfaz de usuario jQuery 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 diferente pantalla. Las siguientes palabras clave definen los tipos de efectos que se pueden utilizar (se puede encontrar detalles adicionales en jQuery):
ciego
Video: Efecto de desplazamiento Jquery scrollTo - muy sencillo
rebotar
acortar
soltar
Video: Animaciones personalizadas con jQuery
explotar
descolorarse
doblez
realce
soplo
latir
Video: jQuery + CSS3: Animaciones
escala
sacudir
tamaño
Video: jQuery UI - эффекты
diapositiva
transferir
Además del efecto real, se puede utilizar una función de aceleración para que el efecto más pronunciado o especial de otras maneras. Se puede ver una lista de las funciones de aceleración a 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 la visibilidad elemento le limita a ver sólo 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 la carpeta Capítulo 06Animations de la código descargable como Visibility.HTML.
$ (Function () {// Realizar un seguimiento de la state.var elemento ocultada = false - $ ("#Efecto") .click (function () {$ ("#Texto de ejemplo").efecto("rebotar", "easeOutBounce", 1500) -}) - $ ("#Espectáculo".click) (function () {ocultos = false - $ ("#Texto de ejemplo").espectáculo("diapositiva", 1500, ChangeButtonState) -}) - $ ("#Esconder".click) (function () {Hidden = true - ($"#Texto de ejemplo").esconder("explotar", 1500, ChangeButtonState) -}) - $ ("#Palanca") .click (function () {Ocultos Ocultos = -! $ ("#Texto de ejemplo").palanca("escala", {Por ciento: 0}, 1500, ChangeButtonState) -}) - // Establecer el estado del botón como ChangeButtonState needed.function () {if (Oculta) {$ ("#Espectáculo") .attr ("oculto", False) - $ ("#Esconder") .attr ("oculto", True) -} else {$ ("#Espectáculo") .attr ("oculto", True) - $ ("#Esconder") .attr ("oculto", False) -}}})El ejemplo comienza creando una variable, oculto, para realizar el seguimiento del estado del elemento. Cuando se oculta el elemento, se muestra el botón Mostrar. Del mismo modo, cuando se muestra el elemento, el botón Ocultar se visualiza también. Esta funcionalidad es controlada por 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 la easeOutBounce función de aceleración, y toda la animación dura 1500 milisegundos.
La visibilidad real es sin cambios, pero el usuario ve una animación del elemento de pantalla. Se 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 deseado - incluyendo una animación en bucle, donde la animación se repite constantemente.
El botón de mostrar y ocultar código de trabajo mano a mano para ocultar o mostrar sampletext. El botón Mostrar usa el efecto de deslizamiento, y el botón Ocultar utiliza el efecto de explotar. Ambos realizan la tarea más de 1.500 milisegundos.
Observe que ambos 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 se ha completado para establecer el estado del botón correctamente.
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 Ocultos también se activa. 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 verificar 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.