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獲取元素的更新位置

回答

相關問題