Ví dụ jQuery (trong jsfiddle) hoạt động trong firefox nhưng không có trong IE8, 7

Question

Tại sao ví dụ này không hoạt động trong IE http://jsfiddle.net/8RZVt/

Tôi gặp lỗi này trong IE8.

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

Answer 1

Các kịch bản thất bại vào thời điểm này bởi vì bạn đang đi qua một giá trị CSS hợp lệ:

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

Answer 2

OK ở đây chúng tôi đi một lần nữa: D

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

Một lần nữa giống với ban đầu tuy nhiên một lần nữa chỉ hoạt hóa backgroundPositionX khi trong IE.

Xin lỗi về việc không thực sự xem xét FF/Chrome lần trước.

Ngoài ra: điều này tất nhiên không phải là rất duyên dáng và Adam Prax là hoàn toàn chính xác về vấn đề là gì. Tôi chỉ muốn đăng một giải pháp cho nó.

Answer 3

Theo jQuery, điều này là bởi vì, như đã nêu trên trang animate tài liệu:

Tất cả các đặc tính hoạt hình phải là một đơn giá trị số (trừ như đã nêu dưới đây); tài sản mà là không phải số không thể được hoạt hình sử dụng chức năng jQuery cơ bản ....

Vì vậy, trên thực tế, trong Firefox bạn đang sử dụng hành vi không xác định. Điều chính xác cần làm là animate trên backgroundPositionX, tuy nhiên Firefox không hỗ trợ điều này.

Có, tuy nhiên, một plugin jQuery mà những gì bạn muốn:

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

Cập nhật

On kiểm tra chặt chẽ hơn, các plugin không hỗ trợ += hoặc -= định dạng.

tôi bị hack nó vào ví dụ này:

http://jsfiddle.net/CxqSs/ (Xem ví dụ mới ở phía dưới.)

chắc chắn có thể sử dụng một số ngẫu nhiên, và có lẽ nên được bổ sung cho trình cắm đó, nhưng nó hoạt động trong cả hai trình duyệt và không dựa vào hành vi không xác định.

BTW, tôi không biết liệu nó có đáng chú ý hay không, nhưng nếu bạn để hoạt ảnh này chạy trong một thời gian dài, nó cuối cùng sẽ làm hỏng giá trị và ngắt. Điều này có thể được khắc phục bằng cách làm động toàn bộ chiều dài của ảnh nền và sau đó đặt lại độ lệch thành 0px trong cuộc gọi lại trước animate tiếp theo. Điều này cũng sẽ tránh cần định dạng +=.

Cũng,

Cần lưu ý rằng speed: 1, step: 1 và speed: 50, step: 50 là tương đương.

Lý do họ nhìn tốc độ khác nhau là vì

1. Có overhead hơn ở tốc độ 1 (mà thực sự là một khoảng thời gian một phần nghìn giây) vì Animate được gọi thường xuyên hơn.

2. Việc nới lỏng mặc định là "xoay", có nghĩa là hoạt ảnh tăng tốc và làm chậm một chút trong suốt khóa học, có nghĩa là tốc độ tổng thể bị ảnh hưởng một chút. Bạn nên thay đổi nới lỏng để "tuyến tính" đối với trường hợp di chuyển của bạn:

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

Điều này có nghĩa mà bạn có thể sử dụng plugin backgroundPosition-Hiệu lực thi hành, nếu không có sự '+ =', bằng cách thiết lập bước của bạn để 2247 (chiều rộng của hình ảnh), như tôi đã nói ở trên.

Và đó cuối cùng đưa chúng ta đến ... chờ cho nó ...

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

Cross-nền tảng, không kludgy, không tràn, giảm bớt một cách chính xác, thêm tham số thiếu, dung dịch.

Answer 4

Nếu bạn kiểm tra mã nguồn của jQuery, bạn sẽ thấy nó sử dụng this regexp để phân tích cú pháp tham số (trong trường hợp của bạn là +=50px 0px). Vì vậy, nó sẽ thấy nó là += (tăng) 50 (đến năm mươi) px 0px (đơn vị, nối thêm sau số). Khi cố đọc giá trị hiện tại, jQuery uses parseFloat, chỉ lấy số ở đầu chuỗi. Vì vậy, nó hoạt động hoàn hảo, ngay cả khi một tài sản đa chiều có lẽ không phải là những gì các lập trình viên jQuery đã có trong tâm trí.

Ngoại trừ IE8 không hỗ trợ nhận giá trị hiện tại là background-position. Có background-position-x và background-position-y nhưng không có background-position. Duh. Vì vậy, đặt cược tốt nhất của bạn là kiểm tra các loại trình duyệt, và hiệu ứng động hoặc background-position hoặc background-position-x tùy thuộc vào điều đó: http://jsfiddle.net/22UWW/

(Có thực sự là một jQuery bug report về vấn đề này, với một more elegant solution.)