ejemplo jQuery (en jsFiddle) que trabajan en Firefox pero no en Internet Explorer 8, 7

Question

Por qué este ejemplo no funciona en IE http://jsfiddle.net/8RZVt/

estoy recibiendo este error en IE8.

Message: Invalid argument. 
Line: 156 
Char: 295 
Code: 0 
URI: http://code.jquery.com/jquery-1.4.4.min.js 

Answer 1

El guión falla en este punto, ya que están pasando un valor CSS válido:

element.animate({ 
      backgroundPosition: animStep + " 0px" /* evaluates to "+=50px 0px" */ 
}, speed, animate); 

Answer 2

bien aquí vamos de nuevo: D

http://jsfiddle.net/c7rKV/1/

Una vez más idéntico al original, sin embargo, de nuevo solo animando backgroundPositionX cuando está en IE.

Disculpas por no mirar FF/Chrome la última vez.

Además: esto por supuesto no es muy elegante y Adam Prax tiene toda la razón sobre cuál es el problema. Solo quería publicar una solución para eso.

Answer 3

Según jQuery, esto es porque, como se indica en la página animate documentación:

Todas las propiedades de animación deben ser un solo valor numérico (excepto como se indica abajo); propiedades que son no numérico no pueden ser animados usando funcionalidad básica jQuery ....

Así que, de hecho, en Firefox que está utilizando un comportamiento indefinido. Lo correcto sería animar en backgroundPositionX, sin embargo, Firefox no es compatible con esto.

Hay, sin embargo, un plugin de jQuery que hace lo que quiere:

http://plugins.jquery.com/project/backgroundPosition-Effect

actualización

En una inspección más cercana, el plugin no soporta += o -= formatos.

Pirateé en este ejemplo:

http://jsfiddle.net/CxqSs/ (Ver nuevo ejemplo en la parte inferior.)

definitivamente podría utilizar algo de limpieza, y probablemente debe añadirse a ese complemento, pero funciona en ambos navegadores y no se basa en un comportamiento indefinido.

Por cierto, no sé si vale la pena señalarlo, pero si deja esta animación en ejecución durante un tiempo prolongado, con el tiempo se desbordará el valor y se romperá. Esto se puede superar animando la longitud total de la imagen de fondo y luego reiniciando el desplazamiento a 0px en la devolución de llamada antes de la próxima animación. Esto también evitaría necesitar el formato +=.

también,

Cabe señalar que speed: 1, step: 1 y speed: 50, step: 50 son equivalentes.

La razón se ven diferentes velocidades es porque

1. Hay más sobrecarga en una velocidad de 1 (que es realmente una duración de milisegundos) debido animado se llama con más frecuencia.

2. La aceleración predeterminada es "swing", lo que significa que la animación se acelera y desacelera ligeramente a lo largo de su recorrido, lo que significa que la velocidad general se ve afectada un poco. Debe cambiar la flexibilización de "lineal" para su caso de desplazamiento:

   var animate = function() { 
       element.animate({ 
        ... 
       }, speed, "linear", animate);    
   }; 
   

Esto significa que se puede utilizar el plugin backgroundPosition-efecto, sin el '+ =', mediante el establecimiento de su paso a 2247 (el ancho de la imagen), como dije anteriormente.

Y que finalmente nos lleva a ... esperar a que ...

http://jsfiddle.net/zyQj3/20/

entre plataformas, no kludgy, no desbordante, aliviando correctamente, el parámetro-carente adicional, solución.

Answer 4

Si comprueba el código fuente de jQuery, verá que usa this regexp para analizar el parámetro (que en su caso es +=50px 0px). Por lo tanto, lo verá como += (aumento) 50 (a cincuenta) px 0px (unidad, añada después del número). Al tratar de leer el valor actual, jQuery uses parseFloat, que solo capta el número al comienzo de la cadena. Por lo tanto, funciona perfectamente, incluso si una propiedad multidimensional no es probablemente lo que los programadores de jQuery tenían en mente.

Excepto que IE8 no admite obtener el valor actual de background-position. Hay background-position-x y background-position-y pero no background-position. Duh. Así que lo mejor es comprobar el tipo de navegador y la animación ya sea background-positionbackground-position-x o dependiendo de que: http://jsfiddle.net/22UWW/

(En realidad, hay un jQuery bug report acerca de esto, con un more elegant solution.)