<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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,cb){
setTimeout(function(){
var marginLeft = parseInt(ball.style.marginLeft);
if (marginLeft === distance){
cb && cb();
}else{
if(marginLeft < distance){
marginLeft++;
}else{
marginLeft--;
}
ball.style.marginLeft = marginLeft;
animate(ball,distance,cb);
}
},13);
}
animate(ball1,100,function(){
console.log(marginLeft);
animate(ball2,200,function(){
animate(ball3,300,function(){
animate(ball3,150,function(){
animate(ball2,150,function(){
animate(ball1,150,function(){
});
});
});
});
});
});
</script>
</body>
</html>
