jQuery 实现动画无限循环

看到了一个动画效果，类似小球敲击。
就想着实现以下，本以为很简单，但是在实现的过程中却遇到了各种小问题。。。
还好，查阅了好多大神的答案，终于实现了，做出来以后感觉其实好简单的东西，我都不懂怎么做了半天。。。
css：

   html, body, ul, li {
            margin: 0;
            padding: 0;
        }

        ul {
            width: 500px;
            height: 500px;
            position: relative;
            margin: 100px auto;
            list-style-type: none;
            border: 1px solid #ccc;
        }

        li {
            position: absolute;
            width: 10px;
            height: 10px;
            background: #ccc;
            border-radius: 50%;
        }

html:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

js:

 $(function () {
        //  这里是为了设置小球的left值
        $("li").each(function (index, element) {
            var $liW = $("li").css("width");
            console.log($liW);  // 因为获取到的值是字符串，所以，下面要用parseInt()方法转换一下
            $(this).css({left: parseInt($liW) * (index + 1) + "px", top: "100px"});
        });
      //   这是另一种实现方法，缺点是需要计算下第二个参数的时间，所以并不推荐使用
//        setInterval(change, 1700, arguments.callee);
        // 自执行函数
        (function change() {
            var firstLeft = $("li").first().css("left");
            var lastLeft = $("li").last().css("left");
            $("li").first().animate({left: parseInt(firstLeft) - 20 + "px"}, 300).delay(200)
                           .animate({left: firstLeft}, 300, function () {
                $("li").last().animate({left: parseInt(lastLeft) + 20 + "px"}, 300).delay(200)
                              .animate({left: lastLeft}, 300, change) //  这里回调change， 实现循环执行
            });
        })();

样式写的很粗糙，只是为了实现效果，喜欢的朋友可以看一下