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

How do I increment CSS Y position coordinates using jQuery?

本文关键字：位置 坐标 CSS 增加 何使用 jQuery      更新时间：2023-09-26

我正在创建一个改变背景图像值的动画。如果我在坐标中硬编码，它会完美地工作，但我试图修改它，以便它简单地将位置增加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个独立选择器中的每个选择器在动画时的值。

任何建议都非常感谢!

尝试:

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

为什么要保存旧的值呢:

从http://api.jquery.com/animate/

动画属性也可以是相对的。如果一个值以+=或-=开头的字符序列提供，则通过从属性的当前值中添加或减去给定的数字来计算目标值。

因此，下面的代码应该工作(尽管我自己没有尝试过) 
var animateNum = function() {
   $('.rss,.twitter,.jquery').animate({
      backgroundPosition:  "+=20px"
   }, 400, "easeOutCirc");
};

应该是这样的:

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