Fatal编程技术网

Javascript HTML元素彼此接触

javascript php jquery html css

Javascript HTML元素彼此接触,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,我有一个按钮和两个HTML元素。按下按钮后，我从jquery调用animate函数，开始向右移动第一个元素，让两个HTML元素接触 我将如何检测两个HTML元素被触碰 我需要帮助。提前谢谢 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> <s

我有一个按钮和两个HTML元素。按下按钮后，我从jquery调用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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“#div1”）。设置动画({
左：'250px'，
});
});
});
启动动画
您的元素永远不会接触，因为您正在设置动画的选择器
$（'div'）
将设置两个div的动画，并以相同的数量移动它们。他们最终会相隔相同的距离

此外，不能将
用作标记名。相反，使用
id
属性为它们指定一个唯一的名称，如下所示：

<div id="div1"></div>
<div id="div2"></div>
请给我一些代码或者一个JSFiddle:）先生，我按照你的要求编辑了我的帖子：）请看：）让#div2也移动一下，然后你会怎么做？如果你正在设置多个属性的动画，并且需要检测多个碰撞类型，事情会变得非常复杂。为第二个对象设置动画也会使事情变得非常复杂。对于设置动画的每个属性，step函数被调用一次，并接受第二个参数，该参数将允许您检查当前在步骤中调用的属性。但如果你想知道如何处理这种情况，我会问一个新问题，我们可以继续讨论，因为这可能需要不同的方法。 
$(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!');
          }
        }
    });
  });
});