jQuery的：動畫backgroundPosition奇怪的行爲在IE <9

Question

嘗試將鼠標懸停在Internet Explorer 8中的「取消」按鈕：

http://jsfiddle.net/HYDKa/

你會發現，你將鼠標懸停在它的第一次，它跳躍你可以看到「確定」按鈕，但它會自行修正。不過，後續的懸停功能正常運行。

請注意，這個錯誤也發生在「確定」按鈕; 「取消」按鈕更爲明顯。另外，這個錯誤出現在IE 6和7中，但是我提供的演示程序將不起作用，因爲圖像是Base64編碼的。

當然，該代碼在非IE瀏覽器中工作正常。

這是一個jQuery的bug？除了分割圖像之外，我還能做些什麼來解決它？我可以包含IE < 9的樣式表，但如果不需要，我寧願不要。

謝謝！

Answer 1

閱讀this後，我結束了改變 「backgroundPosition」 到 「背景位置-X」 解決我的問題。此外，由於某些瀏覽器不支持「background-position-x」，我創建了CSS3轉換以執行相同的操作，然後將JavaScript代碼包裝在if語句中，以便只在瀏覽器不支持CSS3轉換時才運行。我沒有在我的網站上的任何其他地方使用功能檢測，並且我不想用Modernizr這麼簡單的事情來打擾，所以我使用了here所示的功能。我應該注意的另一件事是，我根本沒有必要完全打擾「sliding_link_original_background_position」變量。

我很欣賞barlasapaydin的時間以及閱讀本文的其他人的時間。謝謝！

Answer 2

舊的Internet Explorer版本不會接受沒有'px'的CSS值。 example = width：10px;

因此，您需要在動畫值的末尾添加+'px'。

Here is working jsfiddle

$(this).find('.sliding_link_image').animate({ 
     'backgroundPosition': (sliding_link_original_background_position + 10) + 'px'//<--here 
    }, 150); 
}, function() { 
    $(this).find('.sliding_link_image').animate({ 
     'backgroundPosition': sliding_link_original_background_position + 'px'//<--and here 
    }, 150);