jQuery-Beispiel (in jsfiddle) funktioniert in Firefox, aber nicht in IE8, 7

Question

Warum dieses Beispiel im IE nicht funktioniert http://jsfiddle.net/8RZVt/

Ich erhalte diese Fehlermeldung im IE8.

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

Answer 1

Laut jQuery liegt dies daran, dass, wie in der animate Dokumentationsseite:

A einzelner numerischer Wert ( unten); Eigenschaften, die nicht-numerisch sind, können nicht animiert werden mit grundlegende jQuery-Funktionalität....

In der Tat verwenden Sie in Firefox also ein undefiniertes Verhalten. Die richtige Sache zu tun wäre, auf backgroundPositionX zu animieren, aber Firefox unterstützt dies nicht.

Es gibt jedoch ein jQuery-Plugin, das genau das tut, was Sie wollen:

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

Update

Bei näherer Betrachtung unterstützt das Plugin nicht += o -= Formate.

Ich habe es in dieses Beispiel gehackt:

http://jsfiddle.net/CxqSs/ (Siehe neues Beispiel unten.)

Könnte definitiv einige Bereinigung verwenden, und sollte wahrscheinlich zu diesem Plug-in hinzugefügt werden, aber es funktioniert in beiden Browsern und verlässt sich nicht auf undefiniertes Verhalten.

BTW, ich weiß nicht, ob es erwähnenswert ist, aber wenn Sie diese Animation eine lange Zeit laufen lassen, wird es schließlich den Wert überlaufen und brechen. Dies könnte überwunden werden, indem die volle Länge des Hintergrundbildes zu animieren und dann den Offset auf 0px in den Callback vor dem nächsten animieren zurückgesetzt. Dies würde auch vermeiden, dass die += Format.

Auch ,

Es ist zu beachten, dass speed: 1, step: 1 y speed: 50, step: 50 gleichwertig sind.

Der Grund, warum sie unterschiedlich schnell aussehen, ist folgender

1. Bei einer Geschwindigkeit von 1 (die in Wirklichkeit eine Millisekunde dauert) entsteht mehr Overhead, weil animate häufiger aufgerufen wird.

2. Die Standardeinstellung ist "Schwingen", d. h. die Animation wird im Verlauf leicht beschleunigt und verlangsamt, wodurch die Gesamtgeschwindigkeit etwas beeinträchtigt wird. Sie sollten die Lockerung auf "linear" für Ihre Scrollen Fall ändern:

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

Dies bedeutet dass Sie das backgroundPosition-Effect-Plugin ohne das '+=' verwenden können, indem Sie Ihren Schritt auf 2247 (die Breite des Bildes) setzen, wie ich oben angegeben habe.

Und das schließlich bringt uns zu... warten Sie es ab...

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

Plattformübergreifende, nicht-klumpige, nicht-überlaufende, korrekt erleichternde, extra Parameter-freie Lösung.

Answer 2

Das Skript schlägt an dieser Stelle fehl, weil Sie einen ungültigen CSS-Wert übergeben:

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

Answer 3

OK, jetzt geht's wieder los :D

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

Wieder identisch mit dem Original, aber wieder nur die Animation von backgroundPositionX, wenn in IE.

Entschuldigung, dass ich beim letzten Mal nicht in FF/Chrome geschaut habe.

Außerdem ist das natürlich nicht sehr elegant und Adam Prax hat absolut Recht, was das Problem angeht. Ich wollte nur eine Lösung für das Problem posten.

Answer 4

Wenn Sie den Quellcode von jQuery überprüfen, werden Sie sehen, dass es dieser Regexp um den Parameter zu analysieren (in Ihrem Fall ist das +=50px 0px ). Daher wird sie es als += (Zunahme) 50 (zu fünfzig) px 0px (Einheit, nach der Zahl anhängen). Beim Versuch, den aktuellen Wert zu lesen, jQuery verwendet parseFloat die nur die Zahl am Anfang der Zeichenkette aufgreift. Es funktioniert also perfekt, auch wenn eine mehrdimensionale Eigenschaft wahrscheinlich nicht das ist, was die jQuery-Programmierer im Sinn hatten.

Der IE8 unterstützt jedoch nicht die Abfrage des aktuellen Werts von background-position . Es gibt background-position-x y background-position-y aber keine background-position . Duh. Am besten überprüfen Sie also den Browsertyp und animieren entweder background-position o background-position-x davon abhängig: http://jsfiddle.net/22UWW/

(Es gibt tatsächlich eine jQuery-Fehlerbericht darüber, mit einer eine elegantere Lösung .)