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

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

2 个答案: