Mouvement continu lorsqu'une touche est maintenue enfoncée

Question

Est-il possible d'avoir un élément dans jQuery en mouvement continu lorsque la touche est enfoncée?

J'ai essayé plusieurs façons, mais ils ont toujours une pause entre les appels d'animation. Le code que j'ai actuellement:

$(document).keydown(function (e) { 
    if (e.which == 37) { 
     $('#you').stop().animate({ 
      left: '-=16px' 
     }, 10); 
    } 
}); 
$(document).keyup(function (e) { 
    $('#you').stop(); 
}); 

Answer 1

.animate() n'est pas toujours le meilleur moyen.

// cache jQuery objects for performance 
var you = $("#you") 
, doc = $(document) 

// variable to hold motion state 
, activeMotion 

// goDown motion, adjust numbers to taste 
, goDown = function(){ 
    you.css("left" , you.css("left") - 16); 
    if (activeMotion === goDown) { 
     setTimeout(goDown , 10); 
    } 
} 

doc.keydown(function(e) { 
    if (e.which === 37 && activeMotion !== goDown) { 
     activeMotion = goDown; 
     goDown(); 
    } 
    // all directions can go here in seperate if/else statements 
    // be sure to include "activeMotion !== goDown" else every time 
    // keydown event fires, it will start a new goDown loop. 
}); 

doc.keyup(function() { 
    // simply ends any motion that checked activeMotion 
    activeMotion = null; 
}); 

Answer 2

Au lieu d'animer l'élément, il suffit de le déplacer d'une certaine quantité de pixels. 16 sera probablement trop parce que ça ira trop vite.

Answer 3

Je pense que vous voyez la coupure entre les appels d'animation à cause de votre timing.

Si vous regardez l'intervalle de temps de répétition du clavier de votre système d'exploitation, il devrait être d'environ 35 millisecondes - test it here.

En plus de cela, vous animez tous les 10ms, sans compter le temps qu'il faut pour exécuter toutes les fonctions d'animation, etc. Alors pourquoi ne pas simplifier l'animation et vous inquiétez pas sur les intervalles de temps (try this demo):

var block = $('.block'), 
    leftPos; 
$(document).keydown(function (e) { 
    leftPos = block.position().left; 
    leftPos += (e.which == 37) ? -5 : 0; 
    leftPos += (e.which == 39) ? 5 : 0; 
    block.css('left', leftPos); 
});