Question

我正在使用最初在此问题中找到的代码：how to get a div to randomly move around a page (using jQuery or CSS)

我已编辑代码以使用不同数量的div，而不只是一个。这是我的代码的两个移动div：http://jsfiddle.net/FireBot/ordkyjmx/。最后，页面周围会有5到10个div。

function animateOrbs(){
$('.orb').each(function(){
    var newq = makeNewPosition();
    var oldq = $(this).offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $(this).animate({ top: newq[0], left: newq[1] }, speed, function(){
        animateOrbs();
    });
});
}

我需要对所有移动的div进行碰撞检测，这样它们就不会重叠，而是相互停止或反弹。根据我的研究，听起来我需要比较所有动画div的位置，并检查它们中的任何一个是否相同。作为一个起点，我想我会使用jQuery动画“步骤”选项来获取div移动时的位置并打印每个div中的数字。

function animateOrbs(){
$('.orb').each(function(){
    var newq = makeNewPosition();
    var oldq = $(this).offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);

    $(this).animate(
        {top: newq[0], left: newq[1]},
        {step: function(){
            var pos = $(this).position();
            var posRight = pos.left + $(this).width();
            var posBottom = pos.top + $(this).height();

            var posData ='Top: ' + pos.top.toFixed(0) + '<br />Left: ' + pos.left.toFixed(0) + '<br />Right: ' + posRight.toFixed(0) + '<br />Bottom: ' + posBottom;

            $(this).html('<div>' + posData + '</div>');
        }}, 
        speed, 
        function(){
            animateOrbs();
        }
    );
});
}

在步骤代码到位后，动画现在似乎忽略了速度设置而不再重复。以下是具有步骤选项的相同脚本的小提琴：http://jsfiddle.net/FireBot/u6x84ho9/

我希望div在屏幕上慢慢移动，就像在我的第一个小提琴中一样，同时仍然在他们四处移动时打印他们当前的位置。我检查并仔细检查了我的代码，从我可以告诉我的“步骤”实现与此处的示例匹配：http://api.jquery.com/animate/。我感谢任何帮助！

顺便说一句，如果我在完全错误的方向进行碰撞检测，请告诉我！

Answer 1

1）你的小提琴不起作用，因为你使用.animate的错误签名。正如link you gave youself提供的那样，使用step需要第二个签名：

$("selector").animate(properties, options);

两个参数都必须是对象，并且没有更多的参数，所以你必须将step-function，speed，callback-function和所有其他参数放入options对象中，如下所示：

$(this).animate(
    {top: newq[0], left: newq[1]}, // properties object
    {                              // open options object
        step: function() {/* your stepping code */},
        duration: speed,
        complete : animateOrbs // since animateOrbs is a function there's no wrapping function needed
        // more options, use the names predefined by jQuery!
    }                              // close options object
); // close animate

更新了FIDDLE here。

2）只有关于碰撞检测的一些提示：

通常情况下，您正在进行碰撞检测。只要其中一个边或角位于另一个div的边界内就足够了（并且确实足够数学）。因此，您必须访问其他div的值。您应该考虑将所有数据存储在函数外部的数组或对象中。

jQuery animate＆＃34; step＆＃34;选项打破动画/速度设置

1 个答案: