看到了一个动画效果，类似小球敲击。
就想着实现以下，本以为很简单，但是在实现的过程中却遇到了各种小问题。。。
还好，查阅了好多大神的答案，终于实现了，做出来以后感觉其实好简单的东西，我都不懂怎么做了半天。。。
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， 实现循环执行
});
})();
样式写的很粗糙，只是为了实现效果，喜欢的朋友可以看一下
