Jquery动画没有动画答案

【问题标题】：Jquery animation doesn't animateJquery动画没有动画
【发布时间】：2013-01-08 15:07:20
【问题描述】：

我想用 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);

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

【问题讨论】：

标签： jquery jquery-animate

【解决方案1】：

这个SO question and answer 会有所帮助。 backgroundPositionX 和 backgroundPositionY 是非标准的，并不适用于所有浏览器。

【讨论】：

我试过所有浏览器都没有结果。我将尝试只为背景位置传递一个参数。谢谢你:)

【解决方案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。

【讨论】：

【解决方案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');
});

一个demo

【讨论】：