jquery - 使用增量移动 css 位置

Question

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

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

任何人都可以确认我在 ball.css({ 下的代码是否正确？

Answer 1

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

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

Get the computed style properties for the first element in the set of matched elements.

正如您在 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为你。