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，因此它会跳过动画。

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

如何强制broswer重绘？

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

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>

它会起作用。

动画不会在javascript中绘制？

4 个答案: