Animate two background in a div

Question

Hi I have a div with two background like this:

<div class="colCenter" style="height: 750px; top: -25px; width: 72%; left: 18%; background-image: url('img/sfondi/portfolio.jpg'), url('img/sfondi/servizi.jpg');background-position: 0px 0px, 0px -1440px;">
</div>

if after a click I try to animate it doesn't work why? here is my code:

$(".colCenter").on("click", function() {
    $(".colCenter").animate({
          'backgroundPositionY': '1440px 0px'
    }, 1500, 'linear');
});

In animate I have already tried: 'background-position': '0 1440px, 0 0px' and 'backgroundPositionY': '1440px, 0px'

I'm working in Firefox16 and more than a background in a div is supported

what is "it doesn't work" ? Do you get any error in the browser console ? check it... please — mtk, Oct 30 '12 at 14:11
Instead of animating the `background-position`, I would animate the `top` and `left` of some inner div with the desired background. Much easier, and guaranteed to work. — darksky, Oct 30 '12 at 14:31
No because the position is dynamic isn't animated with top/left or bottom. — Alessandro Minoccheri, Oct 30 '12 at 14:36
Make the position `absolute`. That is the position of the inner div that contains the background image. — darksky, Oct 30 '12 at 14:39
This should help : http://stackoverflow.com/questions/5518834/jquery-animate-background-position-firefox — Johan, Oct 30 '12 at 15:41
No I mean make a new div inside the div that should have the image with position absolute, then animate that newly created div. — darksky, Oct 30 '12 at 15:56

score 1 · Accepted Answer · answered Oct 30 '12 at 15:43

Why?

http://api.jquery.com/animate/ states that:

All animated properties should be animated to a single numeric value

Multiple backgrounds require multiple numeric values. jQuery doesn't "understand" your requested animation.

Then, how?

search for a jquery plugin that interprets the animation you want to do.

-or-

depending on use case, use CSS3 animations instead of jQuery.

-or-

animate manually with javascript (periodically set background positions, linear interpolation isn't that hard to do)

Animate two background in a div

1 Answers1

Why?

Then, how?