JQuery脚本每5秒将背景位置增加2000px

Question

问题

我正在尝试编写一个脚本，每7秒将某个元素的背景位置增加2600px。这里棘手的部分是我无法通过使用css（“背景位置”）抓住测量并将该数量增加所需的数量，因为这应该返回完整的测量，包括“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秒增加2000px：

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);