0

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

<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 的权利吗？

4

1 回答 1

2

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

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

位置（）

代替

抵消（）

不同之处在于， position() 是相对于父元素的，而 offset 是相对于文档的。

2，您遇到了一些变量名称问题，其中 top 和 left 已经定义（我认为是 jquery 的一部分，但我不确定）。因此，将顶部和左侧分别重命名为“y”和“x”，我相信它会按照您的意图工作。

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

于 2012-04-24T02:52:53.270 回答