0

这个想法是让一定数量的元素摇摆，并且只使用一个函数来做到这一点（我认为这是最好的选择）。我制作了一个可以让单个元素摇摆的函数，效果非常好，但后来我试图让它适用于多个元素，但我遇到了真正的问题。

更复杂的是，摇摆函数的设计目的是在每次调用时产生略微不同的直径和速度，因此摇摆看起来很自然。它还可以无限期地循环运动。

因此，该函数分为三个部分，第一个设置它将应用到的元素数组，第二个（称为 main）生成该元素摇摆所需的变量，第三个（称为 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);
}

即注册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 回答