jQuery przykład (w jsfiddle) działa w firefox, ale nie w IE8, 7

Question

Dlaczego ten przykład nie działa w IE http://jsfiddle.net/8RZVt/

dostaję ten błąd w IE8.

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

Answer 1

Skrypt nie w tym momencie, ponieważ są przechodzącą nieprawidłową wartość CSS:

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

Answer 2

OK jedziemy znowu: D

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

Ponownie identyczny do oryginału jednak ponownie po prostu animuję backgroundPositionX w IE.

Przepraszam za to, że ostatnio nie oglądałem się na FF/Chrome.

Dodatkowo: to oczywiście nie jest zbyt groteskowe, a Adam Prax jest absolutnie poprawny w kwestii problemu. Chciałem tylko zamieścić w nim rozwiązanie.

Answer 3

Według jQuery jest, ponieważ, jak podano na stronie animate dokumentacja:

Wszystkie animowane właściwości powinny być pojedynczą wartość liczbowa (z zaznaczonymi wyjątkami poniżej); właściwości, które są nienumeryczny nie mogą być animowane za pomocą podstawową funkcjonalność jQuery ....

Tak więc, w rzeczywistości, w Firefoksie używasz niezdefiniowanej zachowanie. Prawidłowe będzie animowanie w backgroundPositionX, jednak Firefox tego nie obsługuje.

Istnieje jednak plugin jQuery, że robi to, co chcesz:

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

Aktualizacja

Przy bliższym zbadaniu, wtyczka nie obsługuje += lub -= formaty.

I hacked go w tym przykładzie:

http://jsfiddle.net/CxqSs/ (Zobacz nowy przykład na dole).

pewno można użyć trochę porządki, a prawdopodobnie powinien być dodany do tej wtyczki, ale działa w obu przeglądarkach i nie polega na niezdefiniowanym zachowaniu.

BTW, nie wiem, czy warto o tym pamiętać, ale jeśli pozostawisz tę animację przez dłuższy czas, ostatecznie przepełni ona wartość i pęknie. Można temu zaradzić, animując całą długość obrazu tła, a następnie resetując przesunięcie do 0 pikseli w wywołaniu zwrotnym przed następnym animowaniem. Unikałoby to również potrzeby formatu +=.

także,

Należy zauważyć, że speed: 1, step: 1 i speed: 50, step: 50 są równoważne.

Powodem wyglądają różne prędkości dlatego

1. Istnieje więcej napowietrznej w prędkości 1 (który jest naprawdę czas milisekundy), ponieważ ożywione jest wywoływana częściej.

2. Domyślnym poluzowaniem jest "swing", co oznacza, że ​​animacja przyspiesza i spowalnia nieznacznie podczas jej trwania, co oznacza, że ​​ogólna prędkość jest nieco zmieniona. należy zmienić łagodzenie do „liniowy” w Twoim przypadku przewijania:

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

Oznacza to, że można użyć wtyczki backgroundPosition-efekt, bez „+ =”, ustawiając swój krok do 2247 (szerokość obrazu), jak wskazałem powyżej.

I wreszcie przenosi nas do ... czekać na to ...

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

cross-platform, non-kludgy, nie przepełnione, poprawnie złagodzenie, dodatkowy parametr-brakuje, rozwiązanie.

Answer 4

Jeśli zaznaczysz kod źródłowy jQuery, zobaczysz, że używa on this regexp do analizy parametru (w twoim przypadku jest to +=50px 0px). Będzie to widoczne jako += (wzrost) 50 (do pięćdziesięciu) px 0px (jednostka, dodaj po numerze). Podczas próby odczytania bieżącej wartości, jQuery uses parseFloat, która po prostu pobiera liczbę na początku ciągu. Działa więc idealnie, nawet jeśli właściwość wielowymiarowa prawdopodobnie nie jest tym, o czym myśleli programiści jQuery.

Z tym, że IE8 nie obsługuje pobierania bieżącej wartości background-position. Jest background-position-x i background-position-y, ale nie ma background-position. Duh. Więc najlepiej sprawdza typ przeglądarki i animowanie albo background-position lub background-position-x zależnie że: http://jsfiddle.net/22UWW/

(Tu jest rzeczywiście jQuery bug report o tym, ze more elegant solution.)