0

アニメーション要素の位置を追跡しようとしています.2つのボタンがあります; 1つは要素を上に移動し、もう1つは下に移動し、それぞれが移動後に新しい位置を出力する必要があります..コードは次のとおりです。 

<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/

私が気づいた2つのこと：1、あなたが電話していた

位置（）

それ以外の

オフセット（）

違いは、position() は親要素に対して相対的であり、offset はドキュメントに対して相対的です。

2、上と左がすでに定義されている変数名の問題がいくつかありました（jqueryの一部だと思いますが、よくわかりません）。したがって、上部と左側の名前をそれぞれ「y」と「x」に変更すると、意図したとおりに機能します。

左と右が含まれている別の更新があります： http://jsfiddle.net/6JZCW/3/

于 2012-04-24T02:52:53.270 に答える