为什么小球第二步回不去？代码感觉一样的呀~
<!DOCTYPE html>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
.ball{
width:40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background: red;
}
.ball2{
background: yellow;
}
.ball3{
background: green;
}
</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 ball1=document.querySelector('.ball1');
var ball2=document.querySelector('.ball2');
var ball3=document.querySelector('.ball3');
function animation(ball,distance,cb){
setTimeout(function(){
var marginLeft=parseInt(ball.style.marginLeft,10);
if(marginLeft===distance){
cb&&cb()
}else {
if(marginLeft<distance){
marginLeft++;
}else{
marginLeft--;
}
}
ball.style.marginLeft=marginLeft +'px';
animation(ball,distance,cb);
},13)
}
animation(ball1,100,function(){
animation(ball2,200,function(){
animation(ball3,300,function(){
animation(ball3,150,function(){
animation(ball2,150,function(){
animation(ball1,150,function(){
//
})
})
})
})
})
})
</script>
</body>
</html>
