jquery - Jquery动画没有动画

Question

我想用 jQuery 为图片制作动画。我有这个代码：

$(document).ready(function(){
$(".label").delay(2000).animate({backgroundPositionX:"0px",backgroundPositionY:"30px"},10000,linear);
$(".label").animate({backgroundPositionX: "-70px" ,backgroundPositionY:"30px"},10000,linear);
$(".label").animate({backgroundPositionX: "-140px" ,backgroundPositionY:"30px"},10000,linear);

但动画不起作用。知道出了什么问题吗？

Answer 1

这个SO 问题和答案会有所帮助。backgroundPositionX并且backgroundPositionY是非标准的，不适用于所有浏览器。

Answer 2

我将我的代码编辑为：

$(document).ready(function () {
  $(".label").delay(2000).css({
   "backgroundPositionX": "0px",
    "backgroundPositionY": "30px"
  }, 5000, 'linear');
  $(".label").animate({
    "backgroundPositionX": "-70px",
   "backgroundPositionY": "30px"
  }, 5000, 'linear');
  $(".label").animate({
    "backgroundPositionX": "-140px",
    "backgroundPositionY": "30px"
  }, 5000, 'linear');
});

它适用于Chrome。

Answer 3

$(document).ready(function () {
  $(".label").delay(2000).animate({
    backgroundPositionX: "0px",
    backgroundPositionY: "30px"
  }, 10000, 'linear');
  $(".label").animate({
   backgroundPositionX: "-70px",
   backgroundPositionY: "30px"
  }, 10000, 'linear');
  $(".label").animate({
    backgroundPositionX: "-140px",
    backgroundPositionY: "30px"
  }, 10000, 'linear');
});

演示_