如何使用jQuery增加CSS Y位置坐标？

Question

我正在创建一个改变背景图像值的动画。如果我在坐标中硬编码，它是完美的工作，但我试图修改它，以便它将该位置平均增加20px。

下面是我使用的检索原始Y位置的代码 - 完美的作品：

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

现在我想通过20px的递增originalYpos的价值，但是这不工作：

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

我确实相信这是因为在.animate（）内部不允许声明var Ypos，但我需要引用$（this），这意味着3个单独选择器中的每一个的值都是动画。

任何建议，非常感谢！

Answer 1

应该是这样的：

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

Answer 2

尝试：

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

Answer 3

为什么保存旧价值可言：

从

动画性能也可相对的。如果某个值的前面加上了+或 - =字符序列，则目标值是通过从属性的当前值中加上或减去给定数字来计算的。

所以，下面应该工作代码（虽然我还没有尝试过自己）

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