jQuery background position not animate

Question

var d= $('#menu-top-menu').children();
d.hover(function(){
    var e= $(this).position().left;
    var f= $(this).parent().position().left;
    var g= e-f;
    $('#menu-top-menu').animate({backgroundPosition, g + "px 3px"});
    console.log(g);
});

I dont know why it is not animating. could you give me some clue to solve the problem? Thanks

Possible duplicate of [jquery animate background position](http://stackoverflow.com/questions/5171080/jquery-animate-background-position). — Frédéric Hamidi, Aug 14 '13 at 12:13
You could post the html, it will be easier to identify the problem. — Dinesh, Aug 14 '13 at 12:13

score 2 · Answer 1 · answered Aug 14 '13 at 12:15

2

You need to supply the properties to animate separately, and also the correct syntax is to separate the key/value of an objects parameters by a : not a comma. Try this:

var d= $('#menu-top-menu').children();
d.hover(function(){
    var e= $(this).position().left;
    var f= $(this).parent().position().left;
    var g= e-f;
    $('#menu-top-menu').animate({
        'background-position-x': g + 'px', 
        'background-position-y': '3px'
    });
    console.log(g);
});

You could also leave out background-position-y assuming it never changes, and is set in CSS.

answered Aug 14 '13 at 12:15

Rory McCrossan

331,213
40
305
339

@architesa check this `$('#menu-top-menu').animate(backgroundPosition:"("+g +"'px' 3px)");` – Tushar Gupta - curioustushar Aug 14 '13 at 12:21
1

@Tushar, did you test that code? It seems to contain an object literal without curly braces, which is a syntax error. – Frédéric Hamidi Aug 14 '13 at 12:25
@FrédéricHamidi http://stackoverflow.com/questions/5171080/jquery-animate-background-position here you can see it can be done without curly braces – Tushar Gupta - curioustushar Aug 14 '13 at 12:30
1

@Tushar, really? Where? If you're referring to Jonathan Head's and Mark's answers, they only contain partial code. – Frédéric Hamidi Aug 14 '13 at 12:32

score 0 · Answer 2 · answered Aug 14 '13 at 13:09

0

Check with this ... hope it will work( for help : http://api.jquery.com/animate/):

$("#menu-top-menu").animate({
    background-position-x:"20px", 
    background-position-y: "3px"
  },1500);

answered Aug 14 '13 at 13:09

Anup

3,283
1
28
37

jQuery background position not animate

2 Answers2