使用javascript滑动div

Question

我想写一个javascript代码,它会在特定的方向,距离和某个给定的时间内滑动div.我写了这个小脚本.但根本不起作用.相反,浏览器变慢了.没有看到位置变化.谁能告诉我如何实现结果？我知道有很多现成的库可以轻松完成.但我只是想尝试一下.

<script type="text/javascript" language="javascript">
    var element = '';
    var slidePerMS = '';
    function slideIt(ele, direction, distance, slideDuration){
        element = ele;
        var i=0;
        slidePerMS = distance / (slideDuration*1000);
        for(i=0; i<3000; i++){
            setTimeout("changePosition()",1);
    }
}
function changePosition(){              
    var currElement = document.getElementById(element);
    currElement.style.left = "'"+slidePerMS+"px'";
}
</script>

Answer 1

SOO很多东西都错了,这个代码甚至不好笑......让我们看看...

1. 您正在尝试渲染1,000 FPS动画.这对浏览器来说根本不可能.
2. 你传递一个字符串作为参数setTimeout,这是邪恶的eval.
3. 您设置了slidePerMS一次,但之后从未更改过,导致div一遍又一遍地移动到完全相同的位置.
4. 您正在设置带有额外引号的样式 - 您是否将引号放在CSS文件中？

这只是名字而已.试试这个:

<script type="text/javascript" language="javascript"> 
function slideIt(elem, direction, distance, slideDuration){ 
    var elmt = document.getElementById(elem),
        i=0, step = distance / (slideDuration*20),
        stepper = setInterval(function() {
            i = Math.min(distance,i+step);
            elmt.style.left = i+'px';
            if( i == distance) clearInterval(stepper);
        },50);
}
</script>