如何使用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"); 
};