Question

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.

Here’s the code I am using to retrieve the original Y position – works perfectly:

$('.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));
});

Now I am trying to increment the value of originalYpos by 20px but this isn’t working:

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

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.

Any suggestions are greatly appreciated!

Answer 1

Should be like this:

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