0

基本的に、私は紫色の箱を持っています。私はそれをアニメーション化し、左に 250px 移動させ、次に 50px 下に移動し、次に右に移動して、そのサイクルを繰り返したいと考えています。これが私がこれまでに持っているものです:

<!DOCTYPE html>
<html>
<body>

<div id="goodbox"  style="height:50px;width:40px;background-color:purple;position:absolute"> </div>


<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
 </script>

<script>
 $(document).ready(function(){
 $("#goodbox").animate({left:"300px"},5000)
$("#goodbox").animate({bottom:"300px"},5000)
})
 </script>



 </body>
 </html>

左にアニメーション化した後、画面の下部に移動してからアニメーション化しますが、中断したところから移動したいのです。つまり、基本的には、左に 250px 移動します。20px 下に移動します。右に 250px 移動します。20px 上に移動します。それから繰り返す

どうすればいいですか？そして、私がこの別の青い箱を持っているとしましょう。このボックスに機能を与えたとしましょう。左キーを押すと左に移動し、右キーは右に移動します。ダウンキーダウンとアップキーアップ。これらの2つのボックスが接触した場合、紫色のボックスの動きを止めるにはどうすればよいですか? これに答えてくれる人に前もって感謝します。

4

2 に答える 2

1

アニメーション コードを通常の関数にカプセル化し、関数completeの最後の呼び出しのコールバックで渡すことができanimateます。jQuery でアニメーションを継続的にループするにはどうすればよいですか? をご覧ください。詳細については。

于 2012-11-04T12:13:00.610 に答える
0

animate では相対位置を使用できます。したがって、正確な左または下を設定する代わりに、必要な 250 ピクセルを移動するように指定できます。これを行うには、次を使用します。

$('#goodbox').animate({'left': '-=250px'}, 5000);

次々にアニメーション化するには、animate()メソッドの 3 番目のパラメーターを使用して、アニメーションの終了後に発生するコールバックを提供できます。例えば：

$('#goodbox').animate({'left': '-=250px'), 5000, function() {
    $('#goodbox').animate({'top: '+=20px'}, 5000, function() { ... });
});

これを繰り返すには、 を使用できますwindow.setInterval()。これにより、x ミリ秒ごとに JavaScript を実行できます。setInterval()したがって、20 秒ごとに実行する必要がある、それぞれ 5 秒間持続する 4 つのアニメーションがあるとします。したがって、次のようにします。

window.setInterval(animations, 20000);

function animations() {
    // All your animation code here
}

うまくいけば、開始するのに十分な情報を提供できました。

于 2012-11-04T12:13:26.513 に答える