Question

（我试图基于http://www.stackoverflow.com/questions/5419134/how-to-detect-if-two-divs-touch-with-jquery实现jQuery Collision，但也许我应该继续尝试使用第一个建议，使用边界框计算？我还没有尝试过。）

我似乎得到了错误（在Chrome中）＆＃34;在尝试使用＆＃34; .collision（）＆＃34;时，undefined不是函数＆＃34; jQuery Collision提供的函数http://sourceforge.net/projects/jquerycollision/?source=navbar。

我不确定要发布的所有代码，所以如果需要更多信息，请告诉我。试图理解jquery-collision.js中正在发生的所有事情远远超出了我目前的理解水平。

的jquery-1.8.3.min 引擎收录（点）的COM / tJmM97EQ

jquery-collision pastebin（dot）com / 7JS2WNVr

HTML：

<head>

<!--js-collisions-->
<script type="text/javascript" src="javascript/collision/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="javascript/collision/jquery-collision.js"></script>

<!--js-general-->
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>

<!--css-->
<link href="css/hover/css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body id="home">

    <div class="container">
        <p>Website content here</p>
    </div>

    <div class="footer">
        <!--css-tricks.com/fighting-the-space-between-inline-block-elements/-->
        <div class="link" id="portfolio">
        </div>

        <div class="link" id="hamumu">
        </div>

        <div class="link" id="beep">
        </div>

        <div class="link" id="jk">
        </div>

        <span class="stretch"></span>
    </div>

</body>

CSS：

* {
    margin: 0;
}

body#home {
    background-color: green;
}

html, body {
    height: 100%;
}

.container{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -125px;
}

.footer{
    margin-left: auto;
    margin-right: auto;
    height: 125px;
    width: 70%;
    background-color: red;
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

.link {
    position: relative;
    width: 40px;
    height: 40px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    top: -300px;
    zoom: 1;
}

.smoke{
    position: relative;
    top: 20px;
    left: -20px;
    width: 80px;
    height: 80px;
    background-color: gray;
}

/*link specs*/
#portfolio {
    background-color: yellow;
}

#hamumu {
    background-color: pink;
}

#beep {
    background-color: orange;
}

#jk {
    background-color: purple;
}

.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

#port1 {
    position: relative;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    width: 40px;
    height: 40px;
    background-color: blue;
}

JS：

var links = ["#portfolio", "#hamumu", "#beep", "#jk"];
var linkCollision = null;

$(document).ready(function() {

    //if on home page
    if ($("body#home").length > 0) {
          homePage();
    }

});

//home page function
function homePage() {


    for (var i=0; i<links.length; i++) {

        linkCollision = $(links[i]);
        collisionCheck();

        $(links[i]).animate({

            top: '0'

        }, 1000*(Math.random()*(1.5-1)+1), 'easeOutBounce', function(){

        });

    }

}

function collisionCheck() {
    var link = "#portfolio";
    var footer = ".footer";
    var hits = $(footer).collision(link);

    for (var i=0; i<hits.length; i++) {
        alert("dld");
    }

}

Answer 1

你正在覆盖调用另一个版本的jquery。

// Here you call jquery
<script type="text/javascript" src="javascript/collision/jquery-1.8.3.min.js"></script>
// Here you call a jquery plugin that extends the jquery object
<script type="text/javascript" src="javascript/collision/jquery-collision.js"></script>

<!--js-general-->
// Here you call jquery again, wiping out the existing and extended jquery you had
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
// BOOM, you got a error...
<script type="text/javascript" src="javascript/script.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>

获取＆＃34; undefined不是一个功能＆＃34;当使用jQuery Collision时

1 个答案: