Jquery animation doesn't animate

Question

I want to animate a picture with jQuery. I have this code:

$(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);

but the animation doesn't work. Any idea what is going wrong?

score 2 · Answer 1 · edited May 23 '17 at 12:04

2

This SO question and answer will help. backgroundPositionX and backgroundPositionY are non standard and won't work in all browsers.

edited May 23 '17 at 12:04

Community

1
1

answered Jan 08 '13 at 15:13

Stokedout

11,003
5
24
30

I have tried with all browsers with no result. I will try to pass only one parameter for background position. Thank you :) – Cheryl Jan 08 '13 at 16:37

score 1 · Answer 2 · edited Jun 23 '14 at 23:05

I edited my code to this:

$(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');
});

and it works for Chrome.

Anujith · Answer 3 · 2013-01-09T06:02:51.983

0

$(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');
});

A demo

edited Jan 09 '13 at 06:02

answered Jan 08 '13 at 15:29

Anujith

9,370
6
33
48

Jquery animation doesn't animate

3 Answers3