循环基本jquery动画会导致；超过最大调用堆栈大小；

我使用以下简单的jQuery动画为访问者创建一种加载条：

    function animate() {
    $("#box").animate({width:"1000px"}, function() {
        $("#box").animate({left:"1000px"}, function() {
            $("#box").css('width', '100px');
            $("#box").css('left', '-110px');
        }); 
    });

    $("#box2").delay(500).animate({width:"1000px"}, function() {
        $("#box2").animate({left:"1000px"}, function() {
            $("#box2").css('width', '100px');
            $("#box2").css('left', '-110px');       
        }); 
    });
    animate();
    }

但是，每当我用最后一个

animate（）运行它时函数再次循环，我得到以下错误：

未捕获范围错误：超过最大调用堆栈大小

为什么会出现这种情况？如何使上述动画正确循环

谢谢
您正在调用函数
animate（）在函数内部，因此它是一个无限循环，速度非常快，因此内存被填满
超过了最大调用堆栈大小

在函数外部调用此函数，如下所示：-

function animate() {
    $("#box").animate({
        width: "1000px"
    }, function () {
        $("#box").animate({
            left: "1000px"
        }, function () {
            $("#box").css('width', '100px');
            $("#box").css('left', '-110px');
        });
    });

    $("#box2").delay(500).animate({
        width: "1000px"
    }, function () {
        $("#box2").animate({
            left: "1000px"
        }, function () {
            $("#box2").css('width', '100px');
            $("#box2").css('left', '-110px');
        });
    });
}
animate();

如果要多次调用它
setInterval

setInterval(animate,2000);

您已经从@tushar那里得到了一个很好的答案，但这只是一个建议-最好避免这种模棱两可的函数名-尝试给它命名，比如
animateBox（）