為什么三個小球都不動QAQ
<!DOCTYPE>
<html>
<head>
<title>Promise animation</title>
<style type="text/css">
.ball{
width:40px;
height: 40px;
border-radius: 20px;
}
.ball1{
background-color: red;
}
.ball2{
background-color: blue;
}
.ball3{
background-color: yellow;
}
</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,10)
if(marginLeft===distance){
cb && cb()
}
else{
if (marginLeft<distance){
marginLeft++
}
else{
marginLeft--
}
ball.style.marginLeft=marginLeft+'px'
animate(ball, distance, cb)
}
}, 13)
}
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>
2017-03-31
把你的代碼復制到本地發現是最后animate調用的時候寫錯了導致的，括號太多你不知道哪里寫掉了，我重寫了你animate調用的部分三個小球就可以動了，下面是代碼
animate(ball1,100,function(){ animate(ball2,200,function(){ animate(ball3,300,function(){ animate(ball3,150,function(){ animate(ball2,150,function(){ animate(ball1,150,function(){}) }) }) }) }) })