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"});
});

There seems to be a queue of all the keys that has been pressed,
and I need this queue to be empty when the direction is changed.
Because if I keep the left key pressed for a few seconds and then press right,
the “#hero” will go left for a long time and then go right.

Answer 1

You have to stop the current animation to avoid that. Try this.

$("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] ) reference: http://api.jquery.com/stop/

clearQueue – Boolean indicating whether to remove queued animation
as well. Defaults to false.
jumpToEndA – Boolean indicating whether to
complete the current animation immediately. Defaults to false.