<div?class="red"?style="margin-left:?1px;"></div>
<div?class="blue"?style="margin-left:?1px;"></div>
<div?class="green"?style="margin-left:?1px;"></div>
<script?type="text/javascript">
????var?b1=document.querySelector(".red");
????var?b2=document.querySelector(".blue");
????var?b3=document.querySelector(".green");
????var?Promise=window.Promise;
????console.log(Promise)
????function?promiseMove(ball,distance){
????????return?new?Promise(function(resolve,reject){
????????????function?_move(){
????????????????var?mleft=parseInt(ball.style.marginLeft,10);
????????????????setTimeout(function(){
????????????????????var?mleft=parseInt(ball.style.marginLeft,10);
????????????????????if(mleft===distance){
????????????????????????resolve()
????????????????????}else{
????????????????????mleft<distance?mleft++:mleft--
????????????????????}
????????????????????ball.style.marginLeft=mleft+'px';
????????????????????_move();
????????????????},13)
????????????};
????????????_move();
????????})
????}
????promiseMove(b1,100)
????????.then(function(){
????????????return?promiseMove(b2,200)
????????}).then(function(){
????????????return?promiseMove(b3,300)
????????}).then(function(){
????????????return?promiseMove(b3,150)
????????}).then(function(){
????????????return?promiseMove(b2,150)
????????}).then(function(){
????????????return?promiseMove(b1,150)
????????})
</script>
2016-05-02
騷年，我兩犯了同樣的錯(cuò)誤。
2016-06-12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>promise animation</title>
<style>
? ? ? ? ? ? .ball{
? ? ? ? ? ? ?width: 40px;
? ? ? ? ? ? ?height:40px;
? ? ? ? ? ? ?border-radius:20px;
? ? ? ? ? ? }
? ? ? ? ? ? .ball_fi{
? ? ? ? ? ? ?background: red;
? ? ? ? ? ? }
? ? ? ? ? ? .ball_se{
? ? ? ? ? ? ?background: green;
? ? ? ? ? ? }
? ? ? ? ? ? .ball_th{
? ? ? ? ? ? ?background: blue;
? ? ? ? ? ? }
</style>
</head>
<body>
<div class="ball ball_fi" style="margin-left: 0"> </div>
<div class="ball ball_se" style="margin-left: 0"> </div>
<div class="ball ball_th" style="margin-left: 0"> </div>
<script>
var ballfi=document.querySelector(".ball_fi")
var ballse=document.querySelector(".ball_se")
var ballth=document.querySelector(".ball_th")
function animate(balls,distance,cb){
? ? ? ? setTimeout(function(){
? ? ? ? ?var marginLeft= parseInt(balls.style.marginLeft,10)
? ? ? ? ?if(marginLeft===distance){
? ? ? ? ? ?cb && cb()
? ? ? ? ?}else {
? ? ? ? ?if(marginLeft<distance){
? ? ? ? ?marginLeft++
? ? ? ? ?}else{
? ? ? ? ?marginLeft--
? ? ? ? ? }
? ? ? ? ? ? ?balls.style.marginLeft=marginLeft+"px"
? ? ? ? ? ? ?animate(balls,distance,cb)
? ? ? ? ? ??
? ? ? ? ?}
? ? ? ? },10)
? ? }
? ? animate(ballfi,100,function(){
? ? ?animate(ballse,300,function(){
? ? ?animate(ballth,150,function(){
? ? ? ? ? ? ? ? animate(ballth,200,function(){
? ? ? ? ? ? ? ? ?animate(ballse,100,function(){
? ? ? ? ? ? ? ? ?animate(ballth,100,function(){
? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? ?})
? ? ? ? ? ? ? ? })
? ? ?})
? ? ?})
? ? })
</script>
</body>
</html>
2016-05-01
看了半天，也沒有發(fā)現(xiàn)問題呀！