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

您可以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')对象。

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

1 个答案: