从第二个小球开始，速度依次变快是什么情况？
<!-- callback.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.ball{
height: 100px;
width: 100px;
border-radius: 50%;
margin-left: 0;
}
.ball1{
background: red;
}
.ball2{
background: yellow;
}
.ball3{
background: blue;
}
</style>
</head>
<body>
<div class="ball ball1" style="margin-left: 0px"></div>
<div class="ball ball2" style="margin-left: 0px"></div>
<div class="ball ball3" style="margin-left: 0px"></div>
<script type="text/javascript">
// var ball=document.getElementsByClassName("ball");
// var ball1=ball[0];
// var ball2=ball[1];
// var ball3=ball[2];
var ball1=document.querySelector(".ball1");
var ball2=document.querySelector(".ball2");
var ball3=document.querySelector(".ball3");
function animate(ball,distance,callback) {
setTimeout(function(){
var marginLeft=parseInt(ball.style.marginLeft, 10);
if (marginLeft===distance) {
callback&&callback();
}else if(marginLeft<distance){
marginLeft++;
}else{marginLeft--};
ball.style.marginLeft=marginLeft+"px";
animate(ball, distance, callback);
},13)
}
animate(ball1,400,function(){
animate(ball2,400,function(){
animate(ball3,400,function(){
animate(ball1,100,function(){
animate(ball2,200,function(){
animate(ball3,300,function(){
//
})
})
})
})
})
})
</script>
</body>
</html>
