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。

-Bonus酷点如果有人可以解释为什么当我尝试递归调用它时会抛出一个错误（我相信这是超出最大堆栈，但如果有人想尝试它我可以改变我的小提琴重现那里错误得到确切的错误信息）。

Answer 1

看看这个

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

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

Answer 2

使用#ball

更改#box

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

为什么div位置不会用jQuery更新？

2 个答案: