Why the callback function (2nd animation callback) executes as loop causing images to keep on moving left?
<p>My images are absolute positioned horizontally and should move right to end after each interval.</p>

<p>When the first image reaches the last images place they should come back left to the beginning position. </p>

<p>My code does this but it keeps on moving the images left to thousands of px.<br>
After that they start moving right again.</p>

<p>Why is that?</p>

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

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