运行执行不了
<!doctype html>
<html>
<head>
<style type="text/css">
.ball{ width: 40px; height: 40px; border-radius: 50%;}
.ball1 { background: red; }
.ball2 { background: yellow; }
.ball3 { background: green; }
</style>
<meta charset="utf-8">
<title>Promise animation</title>
</head>
<body>
<div class="ball ball1" style="margin-left: 0;"></div>
<div class="ball ball2" style="margin-left: 0;"></div>
<div class="ball ball3" style="margin-left: 0;"></div>
<script type="text/javascript">
var ball1=document.querySelector('.ball1');
var ball2=document.querySelector('.ball2');
var ball3=document.querySelector('.ball3');
function animate(ball, distance, callback){
//distance：传入数据，期望球所运动到的那个点
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;
animate(ball, distance, callback);
}
}, 13); //jq中设定的动画毫秒数
}
animate(ball1, 100, function(){
animate(ball2, 200, function(){
animate(ball3, 300, function(){
animate(ball3, 150, function(){
animate(ball2, 150, function(){
animate(ball1, 150, function(){
});
});
});
});
});
});
</script>
</body>
</html>
