javascript - jQuery脚本每5秒将背景位置增加2000px

Question

问题

我正在尝试编写一个脚本，该脚本将每 7 秒将某个元素的背景位置增加 2600 像素。这里棘手的部分是我无法通过使用 css("background-position") 获取测量值并将该数字增加所需的数量，因为这应该返回完整的测量值，包括“px” - 我怎么能解决这个问题？

我的脚本（非常损坏）

var bgPosition =$('.header-slide-image').css("background-position");

setInterval(function() {
    var newBgposition = bgPosition+2600;
    $('.header-slide-image').delay(2000).css('background-position', "1400px");

}, 5000)

Answer 1

这将每 5 秒将背景位置增加 2000 像素：

setInterval(function() {
    var bgPosition = $('.header-slide-image').css("background-position");
    var bgNum = parseInt(bgPosition, 10);
    $('.header-slide-image').css('background-position', (bgNum + 2000) + "px");
}, 5000);

你的变化：

1. 它在每个计时器间隔获取新的背景位置
2. 它将背景位置解析为一个数字（这也会在末尾删除 px
3. 删除了延迟，因为似乎没有理由这样做。它已经处于延迟的时间间隔中。

您还可以使用+=jQuery 1.6 中添加的语法

setInterval(function() {
    $('.header-slide-image').css('background-position', "+=2000");
}, 5000);