jQuery腳本每5秒將背景位置增加2000px

Question

題

我正在嘗試編寫一個腳本，該腳本每7秒將某個元素的背景位置增加2600px。 這里最棘手的部分是，我無法通過使用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秒增加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);