小球不动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .ball { width: 40px; height: 40px; border-radius: 20px; } .ball { background: red; } .ball2 { background: yellow; } .ball3 { background: green; } </style> <script src="../promise/1.js"> </script> </head> <body> <div class="ball ball1" style="margin-left: 0px;"></div> <div class="ball ball2" style="margin-left: 0px;"></div> <div class="ball ball3" style="margin-left: 0px;"></div> <script type="text/javascript"> var ball1 = document.querySelector('.ball1'); var ball2 = document.querySelector('.ball2'); var ball3 = document.querySelector('.ball3'); var Promise = window.Promise; function promiseAnimate(ball, distance) { return new Promise(function (resolve, reject) { function _animate(ball, distance,cb) { setTimeout(function () { var marginLeft = parseInt(ball.style.marginLeft, 10); if (marginLeft === distance) { resolve(); } else { if (marginLeft < distance) { marginLeft++; } else { marginLeft--; } ball.style.marginLeft = marginLeft + 'px'; _animate(); } }, 13) } _animate(ball,distance); }) } promiseAnimate(ball1, 100) .then(function () { return promiseAnimate(ball2, 200) }) .then(function () { return promiseAnimate(ball3, 300) }) .then(function () { return promiseAnimate(ball3, 150) }) .then(function () { return promiseAnimate(ball2, 150) }) .then(function () { return promiseAnimate(ball1, 150) }) </script> </body> </html>
代码如上,引用的是bluebird.min.js。确认引用上了,只是改名为上述。浏览器是chrome