（JQuery）使用按键移动元素？

$("html").keydown(function(event){ 

     if(event.which == "37") 
      $("#hero").animate({"left" : "-=30px"}); 

     if(event.which == "39") 
      $("#hero").animate({"left" : "+=30px"}); 

     if(event.which == "38") 
      $("#hero").animate({"top" : "-=30px"}); 

     if(event.which == "40") 
      $("#hero").animate({"top" : "+=30px"}); 
});

似乎有一个队列中的所有键被按下，，我需要这个队列在方向改变时为空。因为如果我按住左键几秒钟，然后向右按， “#hero”会长时间左移，然后右移。（JQuery）使用按键移动元素？

来源

2012-02-06 user1091856

你必须停止当前的动画，以避免这种情况。尝试这个。

$("html").keydown(function(event){ 

     if(event.which == "37") 
      $("#hero").stop(true).animate({"left" : "-=30px"}); 

     if(event.which == "39") 
      $("#hero").stop(true).animate({"left" : "+=30px"}); 

     if(event.which == "38") 
      $("#hero").stop(true).animate({"top" : "-=30px"}); 

     if(event.which == "40") 
      $("#hero").stop(true).animate({"top" : "+=30px"}); 
});

.stop([clearQueue] [, jumpToEnd])参考：http://api.jquery.com/stop/

clearQueue - 布尔值，指示是否要删除排队动画为好。默认为false。 jumpToEndA - 布尔值，指示是否要立即完成当前动画。默认为false。

来源

2012-02-06 22:05:31 ShankarSangoli

它有效，但如果我想对角走路怎么办？ – user1091856 2012-02-06 22:14:24

对于移动元素，对角线将'left'和'top'值一起改变。 – ShankarSangoli 2012-02-06 22:15:24

如何？每次调用事件函数时，keyCode属性只包含一个值，如何检查两个键是否被按下（顶部和左侧）？ – user1091856 2012-02-06 22:21:14

$("#hero").stop().animate(...);

应该是足够

来源

2012-02-06 22:04:48 Zlatev

如果不排队的动画，那么你可以让元素动画斜：

$("html").keydown(function(event){ 
    if(event.which == "37") $("#hero").animate({"left" : "-=30px"}, { queue : false }); 

    if(event.which == "39") $("#hero").animate({"left" : "+=30px"}, { queue : false }); 

    if(event.which == "38") $("#hero").animate({"top" : "-=30px"}, { queue : false }); 

    if(event.which == "40") $("#hero").animate({"top" : "+=30px"}, { queue : false }); 
});

这里是一个演示：http://jsfiddle.net/x5Tn4/

来源

2012-02-06 22:30:58 Jasper

检查我demo在我使用最多的2平滑过渡的关键笔画。

来源

2012-02-06 22:35:46

（JQuery）使用按键移动元素？

回答

相关问题