0

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になっているため、アニメーションをスキップします。

基本的に、左座標の各相互作用を描画するためのブラウザーが必要です。

ブラウザーに再描画を強制するにはどうすればよいですか？

4

4 に答える 4

0

ブラウザは、JSの実行が終了するまでページを再描画しません。個別のフレームをペイントするには、 setTimeout()（またはrequestAnimationFrame（） ）を使用する必要があります。

于 2012-06-08T12:32:22.957 に答える
0

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

これは汚いコードなので、使いたい場合に備えて最適化してください。

更新：setIntervalではなくsetTimeoutを使用するつもりでした

于 2012-06-08T12:38:55.210 に答える
0

これがお役に立てば幸いです。

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>

于 2012-06-08T12:46:25.747 に答える
-1

これを試して-

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

それが動作します。

于 2012-06-08T12:40:25.100 に答える