El marco de efectos de jQuery UI está modularizado, al igual que el marco de widgets, lo que le permite elegir qué partes del paquete desea usar y reducir los requisitos del código. Usted puede crea una descarga personalizada para ti, que tiene en cuenta las dependencias entre los módulos.
Antes de ver cómo crear un nuevo efecto, debe tener en cuenta la otra funcionalidad que ya ofrece el marco de efectos de jQuery UI, para que pueda usarlo al desarrollar sus propios efectos.
Detrás de los módulos de efectos individuales de la interfaz de usuario de jQuery se encuentra un núcleo de funcionalidades comúnmente utilizadas. Estas habilidades se implementan aquí para que no tenga que volver a inventarlas y puede aplicarlas de inmediato a sus propios efectos. Junto con la animación en color, encontrará animación de los atributos de una clase a otra, y varias funciones de bajo nivel que pueden ser útiles para desarrollar nuevos efectos.
El módulo Effects Core agrega soporte de animación personalizado para atributos de estilo que contienen valores de color: colores de primer plano y fondo, y colores de borde y contorno. jQuery solo permite la animación de atributos que son valores numéricos simples, con un designador de unidades opcional como px, em o%. No sabe cómo interpretar valores más complejos, como colores, o cómo incrementar esos valores correctamente para lograr la transición deseada, como de azul a rojo a través de un color púrpura intermedio.
Los valores de color se componen de tres componentes: las contribuciones de color rojo, verde y azul, cada una con un valor entre 0 y 255. Se pueden especificar en HTML y CSS de diferentes maneras, como se detalla a continuación:
Los componentes rojo, verde y azul deben separarse y animarse individualmente de sus valores iniciales a los finales, antes de combinarse en el nuevo color compuesto para los pasos intermedios. jQuery UI agrega pasos de animación para cada atributo afectado para decodificar correctamente los colores actuales y deseados, y para cambiar el valor a medida que se ejecuta la animación. Además de los formatos de color descritos en la lista anterior, la llamada animada también puede aceptar una matriz de tres valores numéricos (cada uno entre 0 y 255) para especificar el color. Una vez que estas funciones están definidas, puede animar los colores de la misma manera que lo haría con otros atributos numéricos:
$('#myDiv').animate({backgroundColor: '#DDFFE8'});jQuery UI contiene una lista ampliada de colores con nombre que comprende, desde el básico rojo y verde hasta el más esotérico darkorchid y darksalmon. Incluso hay un color transparente.
El jQuery estándar le permite agregar, eliminar o alternar clases en los elementos seleccionados. jQuery UI va mejor al permitirle animar la transición entre los estados anterior y posterior. Hace esto extrayendo todos los valores de atributo que pueden ser animados (valores numéricos y colores) desde las configuraciones inicial y final, y luego invocando una llamada animada estándar con todas estas propiedades para cambiar. Esta nueva animación se desencadena al especificar una duración al llamar a las funciones addClass, removeClass o toggleClass:
$('#myDiv').addClass('highlight', 1000);jQuery UI también agrega una nueva función, switchClass, que elimina una clase y agrega una clase, con la transición opcional entre los dos estados (cuando se proporciona una duración):
$('#myDiv').switchClass('oldClass', 'newClass', 1000);Para admitir mejor los diversos efectos de jQuery UI, el módulo Effects Core proporciona varias funciones que son útiles para estos efectos, y quizás para los tuyos. Para ilustrar cómo se usan varias de estas funciones, la siguiente lista muestra las partes relevantes del efecto de diapositiva.
$.effects.effect.slide = function( o, done ) {// Create elementvar el = $( this ),props = [ "position", "top", "bottom", "left", "right", "width", "height" ],mode = $.effects.setMode( el, o.mode || "show" ), ...; // Determine mode of operation// Adjust$.effects.save( el, props ); // Save current settingsel.show();distance = o.distance || el[ ref === "top" ? "outerHeight" : "outerWidth" ]( true );$.effects.createWrapper( el ).css({overflow: "hidden"}); // Create wrapper for animation...// Animationanimation[ ref ] = ...;// Animateel.animate( animation, {queue: false,duration: o.duration,easing: o.easing,complete: function() {if ( mode === "hide" ) {el.hide();}$.effects.restore( el, props ); // Restore original settings$.effects.removeWrapper( el ); // Remove animation wrapperdone();}});};Puede usar la función setMode para convertir un modo de alternar en el espectáculo apropiado u ocultar el valor en función de la visibilidad actual del elemento. Si el modo proporcionado es mostrar u ocultar, conserva ese valor, y en este caso, se muestra de manera predeterminada si no se proporciona en absoluto.
Antes de comenzar la animación del efecto, es posible que desee utilizar la función guardar para recordar los valores originales de varios atributos (de los nombres en los accesorios) en el elemento, para que puedan restaurarse cuando hayan terminado. Los valores se almacenan contra el elemento utilizando la función de datos jQuery.
Para facilitar el movimiento de un elemento para un efecto, puede envolver un contenedor alrededor de ese elemento con la función createWrapper para usar como punto de referencia para el movimiento. La información de posición se copia desde el elemento especificado en el contenedor para que aparezca directamente encima del elemento original. El elemento se coloca dentro del nuevo contenedor en su parte superior izquierda para que el usuario no note el efecto general. La función devuelve una referencia a la envoltura.
Cualquier cambio en las configuraciones izquierda / derecha / superior / inferior para el elemento original ahora será relativo a su posición original, sin afectar los elementos circundantes. Habiendo guardado ciertos valores de atributos anteriormente, usaría la función restaurar al finalizar la animación para devolverlos a su configuración original. Al mismo tiempo, debes eliminar cualquier envoltorio que hayas creado previamente con la función remove-Wrapper. Esta función devuelve una referencia a la envoltura si se eliminó, o al elemento si no hubiera envoltorio.
Hay otras funciones proporcionadas por el módulo jQuery UI Effects Core que pueden ser útiles:
getBaseline (origen, original) Esta función normaliza una especificación de origen (una matriz de dos elementos de posiciones verticales y horizontales) en valores fraccionarios (de 0.0 a 1.0) dado un tamaño original (un objeto con atributos de altura y ancho). Convierte las posiciones con nombre (superior, izquierda, central, etc.) en los valores 0.0, 0.5 o 1.0, y convierte los valores numéricos en la proporción de la dimensión relevante. El objeto devuelto tiene los atributos xey para mantener los valores fraccionarios en las direcciones correspondientes. Por ejemplo,
var baseline = $.effects.getBaseline(['middle', 20], {height: 100, width: 200}); // baseline = {x: 0.1, y: 0.5}setTransition (elemento, lista, factor, valor) Para aplicar un factor de escala a múltiples valores de atributo a la vez, use esta función. Para cada nombre de atributo en la lista, recupere su valor actual para el elemento y actualícelo multiplicándolo por factor. Establezca el resultado en el objeto de valor bajo el nombre del atributo y devuelva ese objeto de la función. Por ejemplo, para reducir ciertos valores a la mitad, puede hacer esto:
el.from = $.effects.setTransition(el, ['borderTopWidth', 'borderBottomWidth', ...], 0.5, el.from);cssUnit (clave) Para separar un atributo CSS (clave) con nombre en su cantidad y unidades (em, pt, px o%), devuelto como una matriz de dos valores, use esta función. Si las unidades no son uno de estos tipos conocidos, se devuelve una matriz vacía. Por ejemplo,
var value = el.cssUnit('width'); // e.g. value = [200, 'px']Las funciones presentadas en esta sección son utilizadas por muchos de los efectos provistos por jQuery UI. Estos efectos se revisan en la siguiente sección.
Numerosos efectos son proporcionados por jQuery UI. La mayoría de estos están diseñados para mejorar la forma en que un elemento aparece o desaparece (como ciego y soltar), mientras que otros sirven para atraer su atención a un elemento (como resaltar y agitar):
Estos efectos pueden usarse junto con las funciones mejoradas de mostrar, ocultar y alternar de jQuery UI proporcionando el nombre del efecto deseado como primer parámetro. También puede proporcionar opciones adicionales que modifiquen el comportamiento del efecto, la duración de la animación y una función de devolución de llamada que se activa al finalizar.
$('#aDiv').hide('clip');$('#aDiv').toggle('slide', {direction: 'down'}, 1000);En los módulos jQuery UI se incluyen algunas funciones básicas de utilidad, comportamientos de bajo nivel (como arrastrar y soltar), componentes de alto nivel o widgets (como pestañas y marcador de fecha) y numerosos efectos visuales. Puede usar estos efectos para mejorar la presentación de elementos en su página web o para atraer la atención del usuario sobre un elemento en particular. Para ayudarlo a crear sus propios efectos, hay un núcleo de funciones comúnmente utilizadas disponibles.
¿Has usado el framework de efectos jQuery UI? ¿Cómo se compara con los tweens CSS nativos? Háganos saber sus pensamientos en los comentarios.