HTML元素相互接触[重复]答案

【问题标题】：HTML elements touched each other [duplicate]HTML元素相互接触[重复]
【发布时间】：2014-05-04 10:15:52
【问题描述】：

我有一个按钮和两个 HTML 元素。按下按钮后，我从 j 查询中调用了 animate 函数，开始将第一个元素向右移动，并让两个 HTML 元素被触摸。

如何检测两个 HTML 元素被触摸？

需要帮助。提前致谢。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").animate({
      left:'250px',
    });
  });
});
</script> 
</head>

<body>
<button>Start Animation</button>
<div id = "div1" style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
<div id = "div2" style="background:#98bf21;height:100px;width:100px;position:absolute;left:50%;right:50%">
</div>

</body>
</html>

【问题讨论】：

请提供一些代码或 JSFiddle :)
先生，我按照您的要求编辑了我的帖子 :) 请看 :)

标签： javascript php jquery html css

【解决方案1】：

您的元素永远不会接触，因为您正在制作动画的选择器$('div') 将为两个 div 设置动画并将它们移动相同的量。它们最终将相距相同的距离。

另外，您不能使用<div2> 作为标签名称。相反，使用id 属性为它们分配一个唯一的名称，如下所示：

<div id="div1"></div>
<div id="div2"></div>

然后，不是为$('div') 设置动画，而是为$('#div1') 设置动画。

您可以首先获取 `#div2` 的 `left` 位置（以像素为单位），然后使用该值将 `#div1` 的 `right` 位置动画到该位置，如下所示： $(文档).ready(函数(){ // 当按钮被点击时 $('按钮').click(函数(){ // 获取div2的左边位置 var div2Left = $('#div2').position().left // 动画，使 div1 的右侧匹配 div2 的左侧 $('#div1').animate({ '右': div2Left + 'px', }); }); });

--编辑--

我误读了你的问题，我以为你在问如何让他们接触。如果要检测它们是否重叠，可以使用动画的step函数来检查div1的右侧是否与div2的左侧交叉。试试这个：

$(document).ready(function(){
  // when the buttom is clicked
  $('button').click(function(){
    // get the left position of div2
    var div2Left = $('#div2').position().left
    // animate so that the right side of div1 matches div2's left
    $('#div1').animate({
      'right': '250px',
    }, {
        // this is called every step of the animation 
        step: function(currentRightPos) {
          // check if collision occurs
          if (currentRightPos >= div2Left) {
            console.log('The divs collided!');
          }
        }
    });
  });
});

【讨论】：

让#div2也动起来你会怎么做？
如果您要为多个属性设置动画并且需要检测多种碰撞类型，事情会很快变得非常复杂。为第二个对象设置动画也会使事情变得非常复杂。 step 函数为每个动画属性调用一次，并接受第二个参数，让您检查当前在 step 中调用的属性。但是，如果您想知道如何处理这种情况，我会提出一个新问题，我们可以在那里继续讨论，因为它可能需要不同的方法。