<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://apps.bdimg.com/libs/bluebird/1.2.2/bluebird.js"></script>
<style>
*{margin:0; padding:0;}
.div1{width:50px; height:50px; background:red; border-radius:50%; margin-top:10px; margin-left:0;}
.div2{width:50px; height:50px; background:yellow; border-radius:50%; margin-top:10px; margin-left:0;}
.div3{width:50px; height:50px; background:blue; border-radius:50%; margin-top:10px; margin-left:0;}
</style>
</head>
<body>
<div style="margin:20px; position:relative">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<script>
window.onload = function(){
/*function move(obj, dis, cb){
setTimeout(function(){
var marginLeft = parseInt(obj.offsetLeft,10);
if(marginLeft == dis) {
cb && cb()
} else {
if(marginLeft < dis) {
marginLeft++
} else {
marginLeft--
}
obj.style.marginLeft = marginLeft + 'px'
move(obj, dis, cb)
}
},10)
}
move(d1,150,function(){
move(d2,150,function(){
move(d3, 150, function(){
move(d3,0, function() {
move(d2,0,function(){
move(d1,0)
})
})
})
})
})*/
var d1 = document.querySelector('.div1')
var d2 = document.querySelector('.div2')
var d3 = document.querySelector('.div3')
var Promise = window.Promise
function promiseMove(obj,dis) {
return new Promise(function(resolve, reject) {
function move(){
setTimeout(function(){
var marginLeft = parseInt(obj.offsetLeft,10);
if(marginLeft == dis) {
resolve()
} else {
if(marginLeft < dis) {
marginLeft++
} else {
marginLeft--
}
obj.style.marginLeft = marginLeft + 'px'
move()
}
},10)
}
move()
})
}
promiseMove(d1,100)
.then(function(){return promiseMove(d2,100) })
.then(function(){return promiseMove(d3,100) })
.then(function() {return promiseMove(d3,0)})
.then(function() {return promiseMove(d2,0)})
.then(function() {return promiseMove(d1,0)})
}
</script>
</body>
</html>