dow56114 2014-05-04 00:59
浏览 18
已采纳

HTML元素相互接触[重复]

This question already has an answer here:

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>

</div>
  • 写回答

1条回答 默认 最新

  • dongliyu3278 2014-05-04 01:35
    关注

    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!');
          }
        }
    });
  });
});
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 虚拟机打包apk出现错误
  • ¥30 最小化遗憾贪心算法上界
  • ¥15 用visual studi code完成html页面
  • ¥15 聚类分析或者python进行数据分析
  • ¥15 逻辑谓词和消解原理的运用
  • ¥15 三菱伺服电机按启动按钮有使能但不动作
  • ¥15 js，页面2返回页面1时定位进入的设备
  • ¥50 导入文件到网吧的电脑并且在重启之后不会被恢复
  • ¥15 （希望可以解决问题）ma和mb文件无法正常打开，打开后是空白，但是有正常内存占用，但可以在打开Maya应用程序后打开场景ma和mb格式。
  • ¥20 ML307A在使用AT命令连接EMQX平台的MQTT时被拒绝