Question

$("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”将会离开很长一段时间然后再向右走。

Answer 1

您必须停止当前动画以避免这种情况。试试这个。

$("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。

Answer 2

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

应该够了

Answer 3

如果您没有对动画进行排队，那么您可以让对角线对象进行动画处理：

$("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/

Answer 4

检查我的demo，其中我使用最多2个击键来平滑过渡。

（JQuery）用按键移动元素？

4 个答案: