Question

我已经编写了一些函数，需要不断地执行它们。

var bGposition = $("ul.sigProClassic li.sigProThumb a.sigProLink img.sigProImg");
function posDown() {
    bGposition.css({
        backgroundPosition: "0% 0%",
    }).animate({
        backgroundPositionX: '100%',
        backgroundPositionY: '100%',
    }, 3000)
 }

function posUp() {
    bGposition.css({
    backgroundPosition: "100% 100%",
    }).animate({
        backgroundPositionX: '0%',
        backgroundPositionY: '0%',
    }, 3000)
}
posUp();
posDown();
posUp();
posDown();

我已经找到一种使其工作的方法，但是我需要每次手动调用一个函数。

问题是，使用callback时，我收到“超出最大调用堆栈大小”错误，此后开始工作。

setTimeout在这种情况下不起作用。

我该如何解决？请帮忙！

P.S。对不起我的英语不好！

Answer 1

将posUp和posDown作为回调函数添加到jQuery.animate。

var bGposition = $("ul.sigProClassic li.sigProThumb a.sigProLink img.sigProImg");
function posDown() {
    bGposition.css({
        backgroundPosition: "0% 0%",
    }).animate({
        backgroundPositionX: '100%',
        backgroundPositionY: '100%',
    }, 3000, posUp)
 }

function posUp() {
    bGposition.css({
    backgroundPosition: "100% 100%",
    }).animate({
        backgroundPositionX: '0%',
        backgroundPositionY: '0%',
    }, 3000, posDown)
}
posUp()

Answer 2

我通过添加回调并删除背景位置来“解决”此问题。非常感谢！

var bGposition = $("ul.sigProClassic li.sigProThumb a.sigProLink img.sigProImg");
function posDown() {
    bGposition.animate({
        backgroundPositionX: '100%',
        backgroundPositionY: '100%',
    }, {
        duration: 3000,
        queue: true,
        complete: function() {
            bGposition.animate({
                backgroundPositionX: '0%',
                backgroundPositionY: '0%',
            }, {
                duration: 3000,
                queue: true,
                complete: posDown()
            })
        }
    })
}
posDown();

递归函数JS

2 个答案: