jQuery animate change

Question

Do anybody see problem here? It's not working.

$('#div1').hover(
                function () {                       
                    $('#div2').stop().animate({ backgroundPosition : '(0 -60px)' }, 500);                       
                    $('#div3').stop().animate({ marginRight : '-=10px;' }, 500);
                },
                function () {                   
                    $('#div2').stop().animate({ backgroundPosition : '(0 0)'}, 500);                        
                    $('#div3').stop().animate({ marginRight : '+=10px;'}, 500);
                });

You can't animate the background position, only one value can be animated at a time. — adeneo, Mar 04 '13 at 22:49

score 0 · Answer 1 · edited May 23 '17 at 11:57

JSFiddle

You had semi-colons in margin-right width and parenthesis in the background position.

Also, you didn't load jQuery in the fiddle.

$('#div1').hover(
    function () {                       
        $('#div2').stop().animate({ 'background-position-x' : '0px', 'background-position-y': '-60px' }, 500);                        
        $('#div3').stop().animate({ 'margin-right' : '-=10px' }, 500);
     },
    function () {
        $('#div2').stop().animate({ 'background-position-x' : '0px', 'background-position-y': '0px'}, 500);                        
        $('#div3').stop().animate({ 'margin-right' : '+=10px'}, 500);
});

I also stringified the css definitions, sometimes they don't work right otherwise, so I use strings always just in case.

Seperated the x and y values as per this question.

changed, but didn't help :( – fandrejevic Mar 04 '13 at 22:57 — fandrejevic, Mar 04 '13 at 22:57

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

This:

$('#div2').stop().animate({ backgroundPosition : '(0 -60px)' }, 500);

is invalid!

jQuery does'nt understand '(0 -60px)', so nothing happens, and you can't animate both values anyway, as animate only accepts one value at a time, if I remember correctly that would be the X axis, not the Y axis. You'll need to use the step() method for that:

EDIT:

There's actually a solution to the background animation issue in this answer, that's cross-browser :

JQuery Animate Background Image on Y-axis

edited May 23 '17 at 12:03

Community

1
1

answered Mar 04 '13 at 22:52

adeneo

312,895
29
395
388

ok, but even if I exclude background position change from code, margin change dont work :( – fandrejevic Mar 04 '13 at 23:00
That is because you included a semicolon after the value you're trying to animate. Try this `$('#div3').stop().animate({ marginRight: '+=10px' }, 500);` – adeneo Mar 04 '13 at 23:09
@fandrejevic - You're welcome! I also added a solution to the background animation stuff. – adeneo Mar 04 '13 at 23:13

jQuery animate change

2 Answers2