HTML elements touched each other

Question

I have a button, and two HTML elements. After pressing the button, i called animate function from j query to start moving the first element to right and let two HTML elements get touched.

How i will detect that two HTML elements get touched?

Need Help. Thanks in advance.

<!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>

sir i edited my post as you told to change :) please see it :) — user3148422, May 04 '14 at 01:07

jshanley · Accepted Answer · 2014-05-04T02:15:05.437

Your elements won't ever touch, because your selector $('div') which you are animating will animate both divs and move them both by the same amount. They will end up the same distance apart.

Also, you can't use <div2> as a tag name. Instead, use an id attribute to assign them a unique name, like this:

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

Then instead of animating $('div'), animate $('#div1').

You can first get the `left` position of `#div2` in pixels and use that value to animate the `right` position of `#div1` to exactly that spot, like this: $(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': div2Left + 'px', }); }); });

--EDIT--

I misread your question, I thought you were asking how to get them to touch. If you want to detect that they have overlapped, you can use the step function of the animation to check if the right side of div1 crosses the left side of div2. Try this:

$(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!');
          }
        }
    });
  });
});

Things will get very complicated very quickly if you are animating multiple properties and you need to detect multiple collision types. Animating the second object also complicates things significantly. The step function gets called once for each property that is animated, and takes a second argument which will let you inspect which property is currently being called in step. But if you're wondering about how to handle that situation, I'd ask a new question and we can continue a discussion about it there, since it would likely require a different approach. — jshanley, May 04 '14 at 02:36

HTML elements touched each other

1 Answers1