javascript - 检测两个 div 碰撞的最有效方法

Question

我正在使用 Jquery Collision检测两个相互重叠的物体。这是一个JSFiddle的问题。(很抱歉在 HTML 中包含 jquery collision 脚本，找不到其他方法)

单击灰色容器中的任意位置，将绿色 div 移到白色 div 上。

HTML 结构:

<div class="container">
    <div class="test"></div>
    <div class="menu"></div>
</div>

JS:

$(document).ready(function () {
    var hit_list;
    $(".container").click(function () {

        $(".menu").stop().animate({
            left: "+=100px"
        }, 300, function () {
            $(".menu").animate({
                left: "0"
            }, 800);
        });
        //Test for collision
        hit_list = $(".menu").collision(".test");
        if (hit_list.length != 0) {
            alert("welcome Earthling!");
        }
    });
});

我的方法的问题是，它不会每次都检测到碰撞。即使它顺利通过了白色部分，alert 也不会每次都显示。

我在检查碰撞时哪里出错了吗？是否有更好/更有效的方法来检测 animation 期间的碰撞？

Answer 1

jQuery animate 有一个步骤回调 ( https://api.jquery.com/animate/ )，它在动画的每个步骤后执行。

像这样使用它:

$(document).ready(function () {
    var hit_list;
    $(".container").click(function () {

        $(".menu").stop().animate({
            left: "+=100px"
        }, {
           duration: 300,
           complete: function () {
               $(".menu").animate({
                   left: "0"
               }, 800);
           },
           step: function(){
               //Test for collision
               hit_list = $(".menu").collision(".test");
               if (hit_list.length != 0) {
                   alert("welcome Earthling!");
               }
           }
         });
     });
 });