¿Animación de transición jQuery entre navegadores?

Question

¿Hay alguna transición de animación jQuery 1.3 que funcione tanto en Firefox 3 como en IE7?

Tengo una tabla con varias filas de tablas (25 o más), con algunas de las filas que comienzan ocultas (todas estas filas comparten una clase común; en este ejemplo, es " .hidden "). En el encabezado de la tabla hay un " Mostrar más " enlace que está vinculado a través de .click () a una función que mostrará las filas ocultas, y luego cambiará el " Mostrar más " a " Mostrar menos " y cambie el .click () a una función que haga lo contrario.

En cada función .click (), hay una línea como

$(this).parents("tbody").children("tr.hidden").show();

con .show () reemplazado con .hide () para el " Mostrar menos " función.

Sin embargo, si trato de reemplazar .show () /. hide () con .fadeIn () /. fadeOut (), IE lo hace casi idéntico a .show () /. hide () excepto que toma un minuto para que .hide () surta efecto. No hay animación real allí. Inferior en IE, aunque funciona muy bien Firefox.

Si trato de usar .slideDown () /. slideUp (), es similarmente inestable en IE, siendo casi idéntico a .show () /. hide () excepto con un extraño efecto pulsante justo después de completar la transición. Firefox 3 también se ahoga, aparentemente simplemente olvidando el ancho de fila de las filas de la tabla que se muestran y haciendo que todo se vea terrible.

¿Entonces las animaciones simplemente apestan en IE7? ¿Hay alguna manera de tener una transición elegante y sin problemas en este caso que funcione en ambos navegadores?

Answer 1

De acuerdo con página de compatibilidad de jQuery este tipo de cosas es un error y debe informarse.

Answer 2

Muchas veces tener múltiples animaciones concurrentes puede ser difícil para IE. El motor Javascript no está cerca de Safari, Firefox o Chrome. Esto va para IE6 y IE7. Todavía no he trabajado con IE8.

Una cosa que puede ayudar un poco, es tener alturas estáticas establecidas en los elementos que está tratando de animar. Desde una perspectiva de CSS / diseño, esto generalmente no es ideal, pero ... esto permite que jQuery omita la tarea de tener que calcular primero la altura de cada elemento antes de animar la altura del elemento.

En general, puede enfocar las animaciones de la misma manera que lo haría con una cámara SLR. (Quédate conmigo aquí). Si está tratando de tomar fotos rápidas de un evento deportivo, cualquier fotógrafo recomendaría configurar el enfoque, el ISO y la velocidad de obturación con anticipación. De esta manera, la cámara no tiene que calcular todo esto entre cada toma y solo puede mantener presionado el botón del obturador y hacer clic-clic-clic-clic. Estilo A-Team.

De todos modos, cuando se trata de animaciones, trate de pensar en cosas que el javascript necesita calcular para que la animación suceda. La opacidad, la altura, la altura calculada (ancho del elemento + borde + relleno), la posición de la pantalla, son buenos lugares para comenzar.

Muchas veces, puedes ver lo que jQuery está agregando al DOM cuando comienzan las animaciones (usando Firebug ) . Al igual que en una animación de opacidad, puede ver el estilo = " opacidad: 1; " se agrega justo antes de que comience la cuenta regresiva a 0.

Answer 3

No sería demasiado explícito al hablar de actuaciones en navegadores. Francamente, he visto algunas animaciones pesadas de JS que harán llorar al webkit, mientras que FF e IE lo manejan bastante bien.

Solo tendrá que tener en cuenta que los navegadores tienen diferentes implementaciones de CSS y JS que a veces dificultan señalar con el dedo al culpable detrás de sus lentas actuaciones.

Toma IE. Si tiene un elemento de nivel de bloque 4000x4000 y un gif transparente de 2x2 configurado para repetir, cada vez que, Dios no lo quiera, mueva el elemento IE volverá a dibujar el gif de 2x2 y calculará el alfa para cada uno, 2000 veces. FF almacena en caché el fondo o tiene un nuevo dibujo dramáticamente diferente, en cualquier caso las actuaciones son incomparables. No decía que en el manual, solo debes tener cuidado de cómo y qué estás haciendo.