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));
});

现在我试图将originalYpos的值增加20px，但这不起作用：

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:  "0 " +  ($(this).data('originalYpos')+20) + "px"
   }, 400, "easeOutCirc");
};

Answer 2

为什么要存储旧值：

来自http://api.jquery.com/animate/

动画属性也可以是相对的。如果一个值带有前导+ =或 - =字符序列，则通过在属性的当前值中加上或减去给定数字来计算目标值。

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

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

Answer 3

应该是这样的：

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

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

3 个答案: