递归函数JS

Question

I've written a few functions and need to execute them one after another endlessly.

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

I've already found a way to make it work, but I need to call a function every time manually.

The problem is, when using a callback I'm getting a "maximum call stack size exceeded" error, after that it's starting to work.

setTimeout is not working in this case.

How can i fix it? Please help!

PS Sorry for my English!

Answer 1

Add the posUp and posDown as a callback function to your 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

I've "solved" this problem by adding a callback and removing background-position.Thanks a lot!

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