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});      
  });
});

fiddle .

附加信息:

-我尝试过使用 .animate() 进行相同的运动，但我没有任何运气。

-我也尝试过使用 .offset() 获得位置，但也没有成功。

-我知道这可以用 HTML5 和 canvas 元素来完成，如图所示 here , 但我想为此坚持使用 jQuery 和 CSS。

- 如果有人能解释为什么当我尝试递归调用它时它会抛出一个错误(我相信它超出了最大堆栈，但如果有人想尝试它我可以改变我的 fiddle 以重现那里的错误以获得准确的错误信息)。

Answer 1

看看这个

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

你试图移动#box :)，应该是#ball http://jsfiddle.net/6J5P7/28/