Question

我正在尝试跟踪动画元素的位置，有两个按钮;一个用于向上移动元素，另一个用于向下移动，每个应该在移动后打印新位置。这里有代码：

<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的函数吗？

Answer 1

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

我注意到的两件事：1，你正在打电话

位置（）

而不是

偏移（）

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

2，你有一些变量名称问题，其中top和left已经定义了（我认为是jquery的一部分，但我不确定）。因此，将顶部和左侧分别重命名为“y”和“x”，它就像我认为的那样有效。

这是左右包含的另一个更新： http://jsfiddle.net/6JZCW/3/

jQuery获取元素的更新位置

1 个答案: