jquery - コールバック関数 (2 番目のアニメーション コールバック) がループとして実行され、画像が左に移動し続けるのはなぜですか?

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