0

アイデアは、特定の数の要素を揺らし、それを行うために1つの関数のみを使用することです（これが最良のオプションだと思います）。単一の要素を揺さぶる関数を作成しましたが、これは非常にうまく機能しましたが、それを複数の要素に適用しようとすると、実際の問題が発生しました。

これを複雑にしているのは、揺れ関数が呼び出されるたびにわずかに異なる直径と速度を生成するように設計されているため、揺れが自然に見えることです。また、モーションを無期限にループさせるように作られています。

したがって、関数は3つの部分に分けられます。最初の部分は適用する要素の配列を設定し、2番目の部分（mainと呼ばれる）はその要素の揺れに必要な変数を生成し、3番目の部分（actと呼ばれる）は揺れを実行してループしますアニメーション。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Balloon Proof of Concept Page</title>

    <link rel="stylesheet" type="text/css" href="main.css">

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var now;
            var balloons = new Array();
            balloons[0] = "#box1"
            balloons[1] = "#box2"
            balloons[2] = "#box3"

            var main = function(hello) {

                var speed = Math.random() * (2500 - 2000 + 1) + 2000;
                var change = Math.random() * (35 - 10 + 1) + 10;

                var act = function() {
                    $(hello).animate({
                        left : change
                    }, speed);
                    $(hello).animate({
                        left : -change
                    }, speed);
                    act();
                }
                act();
            }

        for( now = 0; now < balloons.length; now++) {
                main(balloons[now]);
            }
        });
    </script>
</head>

<body>

    <div class="box" id="box1" style="margin-left:300px; margin-top:60px">
        Proj 1
    </div>
    <div class="box" id="box2" style="margin-left:500px; margin-top:20px">
        Proj 2
    </div>
    <div class="box" id="box3" style="margin-left:700px; margin-top:50px">
        Proj 3
    </div>

</body>
</html>

関数がループの最初の配列要素でスタックする可能性があると予想しましたが、基本的なコードが修正されたので、まさにその状況にあります。誰かがこれを解決する方法、または代替方法を知っていますか？

CSSは非常にシンプルで、基本的なスタイルがいくつかあります

.box {
width:100px;
height:100px;
position: absolute;
background-color:red;}

.html .body {position: absolute;}
4

3 に答える 3

2

呼び出す.animate()と、アニメーションがキューに入れられ、すぐに戻ります。

その後、再帰的に再度呼び出すためact、コードは無限ループに入ります。

代わりに、これを試してください。

function act() {
    $(hello)
       .animate({ left :  change }, speed)
       .animate({ left : -change }, speed, act);
}

つまり、アニメーションの第2フェーズの完了コールバックactとして登録します。

于 2012-05-09T21:37:01.803 に答える
0

あなたはタイマーを使うことができます、これは一定期間後に動きを繰り返します。

<script type="text/javascript">                                                                                                                                                                                                                
        $(document).ready(function() {                                                                                                                                                                                                             
            var now;                                                                                                                                                                                                                               
            var balloons = new Array();                                                                                                                                                                                                            
            balloons[0] = "#box1"                                                                                                                                                                                                                  
            balloons[1] = "#box2"                                                                                                                                                                                                                  
            balloons[2] = "#box3"                                                                                                                                                                                                                  

            var main = function(hello) {                                                                                                                                                                                                           

                var speed = Math.random() * (2500 - 2000 + 1) + 2000;                                                                                                                                                                              
                var change = Math.random() * (35 - 10 + 1) + 10;                                                                                                                                                                                   

                var act = function() {                                                                                                                                                                                                             
                    $(hello).animate({                                                                                                                                                                                                             
                        left : change                                                                                                                                                                                                              
                    }, speed);                                                                                                                                                                                                                     
                    $(hello).animate({                                                                                                                                                                                                             
                        left : -change                                                                                                                                                                                                             
                    }, speed);                                                                                                                                                                                                                     
                }                                                                                                                                                                                                                              
                act();                                                                                                                                                                                                                             
                setInterval( act, 1000);                                                                                                                                                                                                           

            }                                                                                                                                                                                                                                      
var now = 0;                                                                                                                                                                                                                               
for( now = 0; now < balloons.length; now++) {                                                                                                                                                                                              
     main(balloons[now]);                                                                                                                                                                                                               
}                                                                                                                                                                                                                                          

});

于 2012-05-09T21:47:33.780 に答える
0

次のように再配置すると、たぶんわかりやすくなります。

$(function(){
    function act(jqObj, speed, change) {
        jqObj.animate({
            'left': change // stage 1
        }, speed).animate({
            'left': -change // stage 2
        }, speed, function(){
            act(jqObj, speed, change); // repeat stages 1 and 2 (indefinitely)
        });
    };
    var balloons = [ // array of jQuery objects.
        $("#box1"),
        $("#box2"),
        $("#box3")
    ];
    for (i = 0; i < balloons.length; i++) {
        var speed = 2000 + Math.random() * 501;
        var change = 10 + Math.random() * 26;
        act(balloons[i], speed, change);
    }
});

こちらの作業デモをご覧ください。

于 2012-05-09T22:30:50.717 に答える