javascript - 动画没有用javascript绘制？

Question

我知道 jQuery 中有一个 .animate() 函数，但是我想自己写一个！

我有这个脚本：

var ball = $("#ball");
var p = $("#ball").position();

for(;;){
    $("#ball").css("left", ++p.left);
    if ( p.left == 400 ){
        break;
    }
}

使用这些元素：

#board { height:500px; width:500px; background-color: gray; position:relative;}
#ball{ height: 50px; width:50px; background-color: red; position:absolute;}

<div id="board">
    <div id="ball"></div>
</div>

现在，当我打开浏览器时，我想看到的是小红框从左到右运行并停在 400 处。

但是，当我加载页面时，该框已为 400，因此它会跳过动画。

本质上，我需要浏览器来绘制左坐标的每个交互。

我如何强制浏览器重新绘制？

Answer 1

在 JS 执行完成之前，浏览器不会重绘页面。您需要使用setTimeout()（或requestAnimationFrame()）来绘制不同的帧。

Answer 2

只需使用 setInterval 即可。

var ball = $("#ball");
var p = $("#ball").position();
var i = 1000;
for(;;){
    //setInterval(myFunction, i);
    setTimeout(myFunction, i);
    i+= 100;

    if ( i> 10000 ){
        break;
    }
}
function myFunction(){
    $("#ball").css("left", ++p.left);
}

这是一段肮脏的代码，所以如果你想使用它，请优化它。

更新：我的意思是使用 setTimeout 而不是 setInterval

Answer 3

为您发布了一个示例，希望对您有所帮助。

http://jsfiddle.net/ymutlu/J2cHn/1/

var ball = $("#ball");
var p = $("#ball").position();


    //$("#ball").css("left", 10+p.left);

    function moveBallDest(){
       var p = $("#ball").position();
       $("#ball").css("left", 10+p.left);
        if ( p.left >= 400 ){
            return;
        }else{
            setTimeout(moveBallDest,1000);
        }
    }

    setTimeout(moveBallDest,1000);

​</p>

Answer 4

尝试这个-

<style>
 #board { height:500px; width:500px; background-color: gray; position:relative;}
 #ball{ height: 50px; width:50px; background-color: red; position:absolute;}
</style>
<script>
 $(document).ready(function(){
   $("#ball").animate({left:"400px"},"slow");
 });
</script>
<div id="board">
  <div id="ball"></div>
</div>

它会起作用的。