检测两个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!");
               }
           }
         });
     });
 });

Answer 2

试试这个http://jsfiddle.net/aamir/y7PEp/6/

$(document).ready(function () {
    var hit_list;
    var hits=0;
    $(".container").click(function () {
        var $this = $(this);
        function checkCollision() {
           //Test for collision
            hit_list = $(".menu").collision(".test");
            if (hit_list.length != 0) {
                hits++;
                $(".menu").html(hits+ ' hits');
            } 
        }

        $(".menu").stop().animate({
            left: "100px"
        }, 300, function () {
            checkCollision();
            $(".menu").animate({
                left: "0"
            }, 800);
        });
    });
});