动画不会在javascript中绘制

Animation does not get drawn in javascript?

本文关键字：绘制 javascript 动画      更新时间：2023-09-26

我知道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，因此它跳过了动画。

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

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

刚刚使用了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

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

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

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);

​

试试这个-

<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>

它会起作用。

相关文章：