問(wèn)題簡(jiǎn)述：本代碼較長(zhǎng)，建議拷貝到編輯器查看。問(wèn)題是使用兩種js方法完成一個(gè)效果，個(gè)人認(rèn)為兩種方法原理一樣，但是一個(gè)效果出來(lái)了，一個(gè)沒(méi)有出效果并且報(bào)錯(cuò)，想知道報(bào)錯(cuò)的原因，望大神指教。

HTML代碼：

    <p>用 requestAnimationFrame 替代 seTtimeout 實(shí)現(xiàn)了一個(gè)動(dòng)畫(huà)效果:</p>
    <div>
        <p class="ball red" style="margin-left:0px;"></p>
        <p class="ball green" style="margin-left:0px;"></p>
        <p class="ball blue" style="margin-left:0px;"></p>
    </div>

CSS代碼：

        .ball {
            width: 20px;
            height: 20px;
            border-radius: 50%; 
        }
        
        .red {
            background-color: red;
        }
        
        .green {
            background-color: green;
        }
        
        .blue {
            background-color: blue;
        }

JavaScript代碼方法一：

        var red = document.querySelector(".red");
        var green = document.querySelector(".green");
        var blue = document.querySelector(".blue");

        ani(red, 100, function() {
            ani(green, 200, function() {
                ani(blue, 150, function() {
                    ani(red, 150);
                    ani(green, 150)
                })
            })
        })

        //代碼一
        function ani(node, to, callback) {
            animate();

            function animate() {
                var marginLeft = parseInt(node.style.marginLeft);
                if (marginLeft == to) {
                    callback && callback();
                } else {
                    if (marginLeft < to) {
                        marginLeft++
                    } else if (marginLeft > to) {
                        marginLeft--
                    }
                    node.style.marginLeft = marginLeft + "px";
                    requestAnimationFrame(animate);
                }
            }
        }

效果沒(méi)問(wèn)題：

JavaScript代碼方法二：

        var red = document.querySelector(".red");
        var green = document.querySelector(".green");
        var blue = document.querySelector(".blue");

        ani(red, 100, function() {
            ani(green, 200, function() {
                ani(blue, 150, function() {
                    ani(red, 150);
                    ani(green, 150)
                })
            })
        })

        function ani(node, to, callback) {
            var marginLeft = parseInt(node.style.marginLeft); //本行報(bào)錯(cuò)，說(shuō)不識(shí)別屬性marginLeft
            if (marginLeft == to) {
                callback && callback();
            } else {
                if (marginLeft < to) {
                    marginLeft++
                } else if (marginLeft > to) {
                    marginLeft--
                }
                node.style.marginLeft = marginLeft + "px";
                requestAnimationFrame(ani);
            }
        }

效果報(bào)錯(cuò)：

問(wèn)題：這兩種方案的差別是什么？為什么第二種方案會(huì)報(bào)錯(cuò)？