jQuery获取元素的更新位置

我试图跟踪动画元素的位置，有两个按钮;一到了移动元素，其他的向下移动，并且每个应打印在新的位置后moving..here是代码：jQuery获取元素的更新位置

<html> 
<head> 
    <style> 
     div { 
      position:absolute; 
      background-color:#abc; 
      left:50px; 
      top :50px; 
      width:90px; 
      height:90px; 
      margin:5px; 
     } 
    </style> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(function(){ 


$("#up").click(function(){ 
    $(".block").animate({"top": "-=50px"}, "slow"); 
    top = $(".block").position().top; 
left = $(".block").position().left; 
    $("#position").html("X: "+left+" , Y:"+top) ; 
}); 

$("#down").click(function(){ 
    $(".block").animate({"top": "+=50px"}, "slow"); 
    top = $(".block").position().top; 
    left = $(".block").position().left; 
    $("#position").html("X: "+left+" , Y:"+top) ; 
}); 
}); 

</script> 

</head> 
    <body> 
     <button id="down">v</button> <button id="up">^</button> 
     <div class="block"></div><br/> 
     <p id="position"></p> 
    </body> 
</html>

，因为我想，我会得到相同的结果这是行不通的对于每一步：X: 50 , Y:[object Window]
如何解决这个问题？是我使用的函数position().left和position().top是否有权获取元素的X和Y？

来源

2012-04-24 Ahmed Waheed

尝试[偏移]（http://api.jquery.com/offset/）而不是位置，并切换到'点击（）因为'click（）'（这实际上是对'bind（）'的调用）[is deprecated]（http://api.jquery.com/bind/） – acconrad 2012-04-24 02:42:50

on（）而不是点击不起作用“点击后没有动作”，offset（）给出了相同的结果，除了左值改变：'X：55，Y：[object Window]' – 2012-04-24 02:50:41

我怀疑你使用的是格式'$ （'#down'）。on（'click'尝试使用'$（document）.on（'click'，'＃down'，看看是否有帮助。 – acconrad 2012-04-24 02:52:45

我创建了一个的jsfiddle以显示工作结果： http://jsfiddle.net/6JZCW/2/

两件事情，我注意到：1，你叫

位置（）

，而不是

偏移量（）

区别在于，position（）是相对于父元素的，其中offset是相对于文档的。

2，你有一些变量的名称问题，顶部和左侧已经定义（我认为是jQuery的一部分，但我不确定）。因此，将顶部和左侧分别重命名为'y'和'x'，它的工作原理与我相信您的意图一致。

下面是用左，右其他更新包括： http://jsfiddle.net/6JZCW/3/

来源

2012-04-24 02:52:53 OnResolve

和这些值是他们的实际元素的坐标？或另一种表示？ – 2012-04-24 03:00:21

它们是相对于文档的实际元素坐标 - 即元素的左上角 – OnResolve 2012-04-24 03:03:54

已更新 - 添加了左右功能来测试x轴 – OnResolve 2012-04-24 03:07:57

jQuery获取元素的更新位置

回答

相关问题