How do I increment CSS Y position coordinates using jQuery?
<p>I am creating an animation that changes the value of a background image. It is working perfectly if I hard code in the coordinates, but I am trying to modify it so that it simnply increments the position by 20px.</p>

<p>Here's the code I am using to retrieve the original Y position - works perfectly:</p>

<pre><code>$('.rss,.twitter,.jquery').each(function(){
// Returns "##px" and "##px"
var backgroundPositions = $(this).css('background-position').split(" ");
// Retrieve the original Y position
$(this).data("originalYpos", backgroundPositions[1].slice(0, -2));
});
</code></pre>

<p>Now I am trying to increment the value of originalYpos by 20px but this isn't working:</p>

<pre><code>var animateNum = function() {
$('.rss,.twitter,.jquery').animate({
var YPos = $(this).data('originalYpos')+20;
backgroundPosition:  0 + "px " +  YPos + "px"}, 400, "easeOutCirc");
};
</code></pre>

<p>I do believe it is because the declaration of var Ypos isn't allowed inside the .animate(), but I need to refer to $(this), meaning the value of each of the 3 individual selectors as they are being animated.</p>

<p>Any suggestions are greatly appreciated!</p>
