Question

我正在测试一个简单的动画来移动文本

<hmtl>
    <style>
     #work{
        background-color:blue;
        width:50px;
        position:absolute;
        left:50px;

    }
    </style>
    <body>
        <div id="work">Animation Area</div>
        <script>
            elem=document.getElementById("work");
            function move(){
                if(elem.style.left < 500){
                    elem.style.left=(elem.style.left+10)+'px';
                    setTimeout(move,20);
                }
            }
            move();
        </script>
    </body>
</hmtl>

在这个简单的代码中，我无法找到我犯了错误的地方。我得到的只是默认位置的文字，但它不会移动。为什么呢？

Answer 1

你犯了一堆错误，经过一些调试后，控制台显示style.left返回null。将其设置为任何值，它可以正常工作

I'll leave you with this

Answer 2

使用marginLeft
以值

获得marginLeft值时，应将值解析为INT

    <div style="margin-left:0px" id="work">JAVASCRIPT ANIMATE</div>
    <script>
        var elem = document.getElementById("work");
        function move(){

            var intLeft = parseInt(elem.style.marginLeft);

            if(intLeft < 500){
                elem.style.marginLeft=(intLeft+10) + 'px';
                setTimeout(move,20);
            }
        }
        move();
    </script>

移动元素的动画不起作用

2 个答案: