jquery - jQueryでdivの位置が更新されないのはなぜですか?

Question

画面上で div を移動しようとしています。現在、jQuery の .css() を使用していますが、div は同じ場所に残ります。最終的には「跳ねるボール」のデモになりますが、現時点では、div はクリックしたときにのみ移動する必要があります。

HTML:

<div id="ball"></div>

CSS:

#ball {
    position:absolute;
    width:10px;
    height:10px;
    border-radius:10px;
    border:1px solid #000;
    background-color:#BADA55;  
}

jQuery:

$(document).ready(function() {
  var xSpeed = 3,
      ySpeed = 2;

  $("#ball").click(function moveIt() {
    var pos = $("#ball").position();
    var maxWidth = $(document).width(),
        maxHeight = $(document).height(),
        x = pos.left,
        y = pos.top;

    x += xSpeed;
    y += ySpeed;

    if(x <= 0 || x+12 >= maxWidth) {
        xSpeed = -xSpeed;   
    }
    if(y <= 0 || y + 12 >= maxHeight) {
        ySpeed = -ySpeed;   
    }

    var yCSS = y + 'px',
        xCSS = x + 'px';

    $("#box").css({top:yCSS, left:xCSS});      
  });
});

フィドル。_

追加情報：

・同じ動きを.animate()でやってみましたがうまくいきませんでした。

-私も .offset() で位置を取得しようとしましたが、運もありません。

-ここに示すように、HTML5 と canvas 要素を使用して実行できることはわかっていますが、これには jQuery と CSS を使用したいと考えています。

-再帰的に呼び出そうとするとエラーがスローされる理由を誰かが説明できる場合のボーナスクールポイント（最大スタックを超えたと思いますが、誰かがそれを試みたい場合は、フィドルを変更してエラーを再現し、正確なエラーを取得できますメッセージ）。

Answer 1

これを見て

$("#box").css({top:yCSS, left:xCSS}); 

#box を移動しようとしています :)、#ball http://jsfiddle.net/6J5P7/28/である必要があります

Answer 2

#box を #ball で変更

$("#ball").css({top:yCSS, left:xCSS});