Q:

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!

A:

This worked for me:   
return this.animate(
            { pixels: pixels },
            {
                step: function(now,fx) {
                    var calculatedPixels = this.pixels;
                    console.log("Background Y position - " + now);

                    $(this).css({
                        backgroundPosition: '0px ' + calculatedPixels + 'px',
                    });
                },
                duration: duration,
                complete: function() {
                    $(this).css({
                        backgroundPosition: '0px 0px',
                    });
                    //not so sure about this but you have to do this somehow
                    this.pixels = 0;
                }
            }, easing);

The position reset problem comes from the fact that you are animating "pixels" value not backgroundPosition. 
Then you are applying the "pixels" value to the backgroundPosition.
Then resetting the backgroundPosition, but not resetting the "pixels" value. 
Next animation will have the latest pixels value as start value.
You have to find a way to reset "pixels" value to backgroundPosition value somehow, to keep them in sync.

