Javascript 限制浏览器窗口中对象的动画

我不熟悉Javascript和jQuery。首先，我试图让一个对象在浏览器窗口中移动

其次，当单击对象时，对象需要移回左侧，但是，当此时单击对象时，对象停止，需要再次单击以将其移回左侧。当我只需要单击一次时，两次单击用于将对象移回左侧。代码如下：

        var ball = null;

        function moveRight() {
            ball.style.left = parseInt(ball.style.left)+2+'px';
            setTimeout(moveRight,20); 
        }

        function moveLeft() {
            ball.style.left = parseInt(ball.style.left)-2+'px';
            setTimeout(moveLeft,20); 
        }

        function init() {
            ball = document.getElementById('ballObject'); 
            ball.style.left = '0px'; 
            moveRight();
        }

        // function stop(){
        //  clearTimeout(moveRight);
        //  ball.style.left = '0px'; 
        // }

        window.onload = init;

---

希望您能帮助我。

我建议您查看jQuery（）的内置动画功能和用于CSS3动画的jQuery插件jQuery.transit（）。@Jason谢谢。我肯定会在将来研究这个问题，不过，我正试图用简单的老Javascript来实现这一点。有可能吗？是的，有可能使用纯Javascript。jQuery（或任何其他Javascript库）可以做的任何事情都可以用普通Javascript完成。jQuery是一个用Javascript编写的库，它可以使某些事情变得更快、更简单；它是以加载脚本为代价的。