                        课程
                    
                        /前端开发
                        
                            /Node.js
                        
                        /进击Node.js基础（二）

跟视频敲的球为什么不能懂动啊？控制台错误提示：解析 'margin-left' 的值时出错。声明被丢弃。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.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>

var ball1=document.querySelector('.ball1');
//console.log(ball1.style.marginLeft);
var ball2=document.querySelector('.ball2');
var ball3=document.querySelector('.ball3');

function animate(ball,distance,cb){
setTimeout(function () {
var marginLeft = parseInt(ball.style.marginLeft,10)+"px" ;
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>