Question

这个想法是让一定数量的元素摆动，并且只使用一个函数来做（我认为这是最好的选择）。我创建了一个能够使单个元素摇摆的功能， 非常好用 ，但后来我尝试将其应用于多个元素并遇到了真正的问题。

令这一点复杂化的是，摇摆功能设计为每次调用时产生略微不同的直径和速度，因此摇摆看起来很自然。它也可以无限循环运动。

因此该函数分为三个部分，第一个设置它将应用的元素数组，第二个（称为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;}

Answer 1

当您致电.animate()时，排队动画，然后立即返回。

由于您再次以递归方式调用act，因此代码将进入无限循环。

试试这个，而不是：

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

即。注册act作为动画第二阶段的完成回调。

Answer 2

您可以使用计时器，这将在一段时间后重复运动。

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

});

Answer 3

如果重新安排如下可能更容易理解：

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

参见演示here。

如何同时在多个元素上运行一个jQuery动画功能？

3 个答案: