（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）使用按鍵移動元素？

回答

相關問題