Custom "animate” jQuery function. How to reset step"s "now” variable?

I need to animate the background-position property of an element with jQuery. By following this tutorial, that uses default jQuery animate function, I had no luck.

http://snook.ca/archives/javascript/jquery-bg-image-animations

My function was like:

$('#content').css( {backgroundPosition: "0 0"} )

             .animate(

                 {backgroundPosition:"(0 -900px)"}, 

                 {duration:500}

             );

I had no luck with it, so I tried to code my own function, that changes the vertical background position of an element. It looks like:

$.fn.moveBackgroundY = function( pixels, duration, easing ) {



    return this.animate(

                { pixels: pixels },

                {

                    step: function(now,fx) {



                        console.log("Background Y position - " + now);



                        $(this).css({

                            backgroundPosition: '0px ' + now + 'px',

                        });

                    },

                    duration: duration,

                    complete: function() {

                        $(this).css({

                            backgroundPosition: '0px 0px',

                        });

                    }

                }, easing);

};

To animate the element's Y background position to -900, I call the function like this:

$('#content').moveBackgroundY(-900, 2100, 'easeInOutCubic');

Notice that here the variable now (background position Y) inside step: will will decrease from 0 to -900.

That works fine, but here comes my problem. After this, I need to reset this background position to "0px 0px" directly with the jQuery .css() function, and then animate it again like:

$('#content').moveBackgroundY(300, 2100, 'easeInOutCubic');

In this case, as I reseted my background position to "0px 0px", the parameter now should go from 0 to 300, but it goes from -900 to 300, where -900 was the value I set first calling my function.

Anyone knows what is wrong, or how could I reset this parameter so as It takes the correct values each time?

I have another function like it that rotates the element changing the CSS3 property transform - rotate, and I have the same problem.

Thanks for your help!