Question

我有一个按钮和两个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>

Answer 1

您的元素无法触及，因为您正在制作动画的选择器$('div')会为两个div设置动画并将它们移动相同的数量。他们将以相同的距离结束。

此外，您无法使用<div2>作为标记名称。相反，使用id属性为其分配一个唯一的名称，如下所示：

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

然后，不要动画$('div')，动画$('#div1')。

<德尔> 您可以先以像素为单位获取`#div2`的`left`位置，并使用该值将`#div1`的`right`位置设置为恰好该位置的动画，如下所示： $（文件）。就绪（函数（）{ //点击buttom时 $（＆＃39;按钮＆＃39;）。点击（函数（）{ //获取div2的左侧位置 var div2Left = $（＆＃39; #div2＆＃39;）。position（）。left //动画，以便div1的右侧与div2的左侧匹配 $（＆＃39;＃DIV1＆＃39;）动画（{。＆＃39;对＆＃39;：div2Left +＆＃39; px＆＃39;， }）; }）; }）;

- 编辑 -

我误解了你的问题，我以为你在问如何让他们触摸。如果要检测它们是否重叠，可以使用动画的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!');
          }
        }
    });
  });
});

HTML元素相互触动

1 个答案: