<!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>
2018-11-07
2018-10-05
原來這么寫就可以了，謝謝你，因為
parseInt函數去掉單位了，這樣小球就動起來了
2018-03-30
不好意思 ?找到答案了
?ball.style.marginLeft?=?marginLeft;后面加"px"就可以了