javascript - 使用 jQuery 以增量方式更改背景位置

Question

我正在尝试一种有效的方法来循环以 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 来做这件事。但我真的不想局限于我的样式表中的内容。

Answer 1

您可以将回调函数传递给 jQuery 的.css()方法：

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

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