使用 jQuery 以增量方式更改背景位置答案

【问题标题】：background-position change in increments with jQuery使用 jQuery 以增量方式更改背景位置
【发布时间】：2013-01-29 19:17:39
【问题描述】：

我正在尝试一种有效的方法来循环以 25% 的增量循环元素的背景图像，但是当它达到 100% 时，它会在下一个增量时回到 0%。

我可以这样做：

var currentPos = $('.ele1').css('background-position');
var elementPositions = currentPos.split(' ');

var x = Number(elementPositions[0].replace(/[^0-9-]/g, ''));
//var y = Number(elementPositions[1].replace(/[^0-9-]/g, ''));

// only want to do the x axis
x = (x == 100) ? 0 : x += 25;

$('.ele1').css('background-position', x + "%" + " 0");

但我不喜欢我必须调用元素两次的事实。有没有更有效的方法来使用 jQuery 增加 % 并在 100% 后将其重置回 0%？

我确实想过用 CSS .classes 来做这件事。但我真的不想局限于我的样式表中的内容。

【问题讨论】：

您为什么希望这样做更有效率？是否影响用户体验？或者只是想有一个更优雅的解决方案？
它用于游戏的精灵解决方案。所以我真的需要让它尽可能高效。但游戏不需要复杂的精灵动画框架。就像上面的一样，但更好。
parseInt($('.ele1').css('background-position-x'), 10) 会将 x 位置作为整数提供给您。不需要拆分/替换/等。
background-position-x跨浏览器兼容吗？
另外：如果你在stackoverflow中搜索'jquery sprite animation'，你会发现很多人在做非常相似的事情，也许还有一些关于效率的指针。

标签： javascript jquery css background-position

【解决方案1】：

你可以将pass a callback function转为jQuery的.css()方法：

$('.ele1').css('background-position', function (i, value) {
    var x = parseInt(value, 10);
    return (x == 100 ? 0 : x + 25) + "%" + " 0";
});

如果您从循环/计时器/事件/其他任何内容中调用它，您应该缓存 $('.ele1') 对象。

【讨论】：