Почему не обновляется позиция div с помощью jQuery?

Я пытаюсь переместить 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});      
  });
});

Скрипка.

Дополнительная информация:

-I "Произошло одно и то же движение с помощью.animate(), но мне не повезло.

-I 'также попытался получить позицию с.offset(), но не повезло и там.

-I знают, что это можно сделать с HTML5 и элементом canvas, как показано здесь, но я хотел бы придерживаться jQuery и CSS для этого.

-Bonus крутые точки, если кто-нибудь может объяснить, почему, когда я пытаюсь вызвать его рекурсивно, он выдает ошибку (я считаю, что это был максимальный стек, но если кто-то хочет его попробовать, я могу изменить свою скрипту, чтобы воспроизвести там ошибку, чтобы получить точную сообщение об ошибке).