jquery - 为什么回调函数（第二个动画回调）作为循环执行，导致图像继续向左移动？

Question

我的图像是绝对水平定位的，并且应该在每个间隔后向右移动到结束。

当第一个图像到达最后一个图像位置时，它们应该向左返回到开始位置。

我的代码会这样做，但它会继续将图像移动到数千像素。
之后，他们又开始向右移动。

这是为什么？

$(document).ready(function() {
    //alert("Ok");
    var w = 0;
    $('ul>li').each(function(i, o) {
        $(this).css({
            "position": "absolute",
            "left": 5 + w + 'px'
        })`enter code here`
        w = w + 210;
    });

    var lastPos = parseInt($("ul>li:last").css("left"));
    //alert(lastPos);
    var I = 0;
    setInterval(function() {
        I = parseInt($("ul>li:first-child").css("left"));
        //$("#i1").text(I);
        $("ul>li").animate({
            left: "+=210px"
        }, 500, function() {
            I = parseInt($("ul>li:first-child").css("left"));
            $("#i2").text(I);
            $("#i4").text(I > lastPos)
            if (I > lastPos) { //here comes the problem
                $("ul>li").animate({
                    left: "-=" + lastPos
                }, 500, function() {
                    I = parseInt($("ul>li:first-child").css("left"));
                    $("#i3").text(I);
                });
            }
        });
    }, 4000);
})