首先用最简略的方法实现一个动画后果
<!doctype>
<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: 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, cd){
//每13毫秒转变一次圆球的地位，直到到达指定地位
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft,10)
//球到达预期地位
if(marginLeft === distance){
cd && cd()
}else{
//球在左边
if(marginLeft < distance){
marginLeft++
}else{
//球在右边
marginLeft--
}
//调剂球的地位
ball.style.marginLeft = marginLeft
animate(ball, distance, cd)
}
},13)
}
//掌握动画
animate(ball1, 100,function(){
animate(ball2, 200, function(){
animate(ball3, 150, function(){
animate(ball2, 150, function(){
animate(ball1, 150, function(){
})
})
})
})
})
</script>
</body>
</html><!doctype>
<html>
<head>
<titl
