jQuery的在屏幕上移动一个div，点点滴滴

所以我有这样的代码：jQuery的在屏幕上移动一个div，点点滴滴

$(document).ready(function() { 
      $(document).keypress(function(e) 
      { 
       switch(e.which) 
       { 
        // user presses the "a" 
        case 97: $('#character').css('left','+=40'); 
       } 
      } 
}

的问题是，我只能按“A”一次，#character只有一次移动...

我也有jQuery拖动启用（http://jqueryui.com/demos/draggable/）周围有一个约束区域。

为什么我只能用按键移动div一次？

来源

2010-07-15 Barrie Reader

我不认为jQuery会在.css()的调用中解释“+ = 40”。我怀疑它只会移动一次，因为你第一次抛出原先的“左”值，并将其设置为浏览器忽略的字符串“+ = 40”。随后的点击只需重复一次即可。

我可能是错的，但我一直在阅读jQuery源代码，并且我没有看到任何暗示.css()函数执行.animate()对此类值的处理。

您可以尝试直接使用.animate()：

case 97: $('#character').animate({'left': '+=40'}, 1);

来源

2010-07-15 13:28:09 Pointy

同意。并且你可以使用'animate（）'，其持续时间设置为0.如果'css（）'支持，效果相同'+ =' – peirix 2010-07-15 13:30:18

谢谢@peiX我不会使用'.animate（）'所以我不能100％确定0会起作用。我怀疑你是对的。 – Pointy 2010-07-15 13:34:16

不错的解决方案，这里是一个工作实现： http://jsbin.com/eripu – 2010-07-15 13:38:58

我想你会需要得到字符的位置，添加40到它的左边，然后应用CSS改变，例如

var pos = $("#character").offset(); 

$("#character").animate({"left": pos.left + 40}, 100);

如果你在其他地方存储角色的位置，你也可以更新该值并更新它在游戏循环中的位置。

来源

2010-07-15 13:36:45

jQuery会理解调用'.animate（）'中的“+ =”符号。 – Pointy 2010-07-15 13:39:32

您可以将函数传递给第二个参数.css()，您可以在其中手动对要设置的值进行一些操作。

试试这个：

 // The 'left' parameter in the function references the current position. 

case 97:$('#character').css('left',function(i,left){ 
            return parseInt(left) + 40; 
           });

编辑：正如@Gaby指出，调用.replace('px','')是不必要的，因为.parseInt()自动处理这一点。

来源

2010-07-15 13:37:12 user113716

虽然它更简洁，但不需要删除'px'，因为'parseInt'只会处理它在字符串中找到的第一个数字。 – 2010-07-15 13:52:19

@Gaby +1谢谢，我不知道。我会更新。：O） – user113716 2010-07-15 13:57:11

我很惊讶它做任何事情！

你错过了一对夫妇）; 我也调整了一下。这工作！

$(document).ready(function() { 
    $(document).keypress(function (e) { 
     switch (e.which) { 
      // user presses the "a" 
      case 97: 
       var left = parseInt($('#character').css('left')) + 40; 

       $('#character').css('left', left + 'px'); 
     } 
    }); 
});

来源

2010-07-15 13:39:29 Patricia

jQuery的在屏幕上移动一个div，点点滴滴

回答

相关问题