爲什麼我的jquery腳本動畫不起作用？

這裏是簡單的背景位置動畫。爲什麼IE 8在鼠標遠離不動畫？ Opera和Firefox不顯示任何操作，只有Chrome瀏覽器能夠很好地執行操作。如何讓它在所有lates版本瀏覽器上工作？爲什麼我的jquery腳本動畫不起作用？

$(function(){ 
$(".call_order").hover(function() { 
    $(this).stop().animate({ 
     backgroundPositionX: "-300" 
    }, 100); 
} , function() { 
    $(this).stop().animate({ 
     backgroundPositionX: "0" 
    }, 100); 
});

}）;

Here is a sample

來源

2013-02-17 Alexander Nemov

Firefox不識別'background-position-x'，只有組合的'background-position：xvalue yvalue'。其他瀏覽器可能相同。 – Blazemonger 2013-02-17 19:40:24

爲什麼不使用css [transform]（http://www.w3schools.com/css3/css3_2dtransforms.asp）和css [transition]（http://www.w3schools.com/css3/css3_transitions.asp）而不是使用jQuery？ – 2013-02-17 19:42:46

亞歷山大，如果答案沒有問題，請接受。 – Sergio 2013-07-06 09:20:38

Firefox和Opera不支持backgroundPositionX和backgroundPositionY（BEC，它是不是在相應的規格。），甚至與background-positionIE8 seems to be buggy。

爲backgroundPositionX和backgroundPositionY瀏覽器支持：

 
    Browser  Version 
    ---------------------------- 
    Opera   Not Supported 
    Firefox  Not Supported 
    Safari  3+ 
    IE   4+ 
    Chrome  Yes (version unknown)

所以，我建議你使用Brandon Aaron's jQuery plug-in有背景位置跨瀏覽器支持。

如果您檢查代碼;它首先測試backgroundPositionX屬性並查看它是否受瀏覽器支持。如果不;它解析出backgroundPosition屬性中的X和Y值。

注意：與評論中的建議不同，CSS3將would not be helpful轉換爲您，因爲您需要IE8支持。

來源

2013-02-17 20:29:52

爲什麼我的jquery腳本動畫不起作用？

回答

相關問題