使用增量移动css位置答案

【问题标题】：Moving css position using increment使用增量移动css位置
【发布时间】：2025-12-31 00:30:11
【问题描述】：

我正在尝试使用 jQuery 和 css 将元素位置从其当前位置移动。但是，我使用的语法似乎没有做任何事情：

var ball = $("#ball1");
var movement = {
    x: 5,
    y: 5
}
ball.css({
    top: "+="+movement.y,  //+= adds the value
    left: "+="+movement.x
});

谁能确认我在ball.css({ 下的代码是否正确？

【问题讨论】：

标签： jquery css

【解决方案1】：

这是不正确的。你给了使用这样的东西

ball.css({
    top: parseInt(ball.css('top')) + movement.y + 'px',
    left: parseInt(ball.css('left')) + movement.x + 'px'
});

获取匹配元素集中第一个元素的计算样式属性。

正如您在 documentation 网站上看到的那样，jQuery.css 将为我们提供计算值，这意味着如果 left 的值为 15px，我们不会得到 15。为此，我们必须使用parseInt。检查此答案以了解parseInt 的更多用法。所以这应该是它的工作，但是正如有人在那个帖子上回答的那样，我们可以创建一个 jQuery 插件来让它看起来更好：

jQuery.fn.cssNumber = function(prop){
    var v = parseInt(this.css(prop), 10);
    return isNaN(v) ? 0 : v;
};

ball.css({
    top: ball.cssNumber('top') + movement.y + 'px',
    left: ball.cssNumber('left') + movement.x + 'px'
});

我还为你创建了一个working example。

【讨论】：

我已经尝试阅读 Jquery.fn 文档，但我并不完全理解它。它是覆盖cssNumber 还是创建一个名为cssNumber 的新函数？
为了更好地理解这一点，你应该阅读jQuery Plugins

【解决方案2】：

试试这个……

ball.css({
    top: +movement.y,
    left: +movement.x
});

【讨论】：

这似乎移动了它，然后它又回到了原来的位置
@MarksCode 你能把你的代码放在一个小提琴里以便于理解吗？
是的，谢谢你的帮助 :) jsfiddle.net/vo1zysds 我的本地机器上有一个“BlueBall.png”，所以它不会出现在小提琴中
对我来说它不动。