smooth animate() von div auf keydown()

Question

Ich versuche eine kontinuierliche Bewegung für das div auf Keydown zu bekommen. Die Bewegung beginnt, wird dann aber langsamer und wird etwas ruckelnd. Wie kann ich dieses Problem beheben? hier ist mein Code:

$(document).keydown(function(e) { 
    width = $(this).width(); 

    switch(e.which) { 
     case key.LEFT: 
      $('.character').stop().animate({ 
       left:'-=' + width 
      }, 2000); 

      break; 

     case key.RIGHT: 
      $('.character').stop().animate({ 
       left:'+=' + width 
      }, 2000); 

      break; 
    } 

    e.preventDefault(); 
}).keyup(function() { 
    $('.character').stop(); 
}); 

und hier ist die jsfiddle

Answer 1

Das Problem ist einfach, weil Sie animate() und stop() verwenden. Die Funktion keydown wird jedes Mal ausgelöst, wenn die Benutzeroberfläche bei gedrückter Taste neu gezeichnet wird. Das ist möglicherweise Hunderte oder sogar Tausende Male pro Sekunde. Daher haben Sie eine Animation definiert und sie für jedes dieser Ereignisse gestoppt.

Ein besserer Ansatz wäre, einfach die left Position des Elements .character jedes Mal hinzuzufügen oder zu subtrahieren, wenn das Ereignis keydown ausgelöst wird. Etwas wie folgt aus:

$(document).keydown(function(e) { 
    e.preventDefault(); 
    width = $('.character').width(); 

    switch (e.which) { 
     case key.LEFT: 
      $('.character').css('left', function(i, v) { 
       return parseInt(v, 10) - width; 
      }); 
      break; 

     case key.RIGHT: 
      $('.character').css('left', function(i, v) { 
       return parseInt(v, 10) + width; 
      }); 
      break; 
    } 
}); 

Working example

auch beachten, dass die Breite des gewünschten Elements in Ihrem delegierte Event-Handler erhalten müssen Sie den .character Wähler direkt als this zum document beziehen verwenden.

Answer 2

Wie zuvor erwähnt, stoppt die stop() -Funktion im Wesentlichen die Animation. Sie könnte einfach versuchen, es zu entfernen, und das die Zeit, in der https://jsfiddle.net/aluminium22/5uxwckz9/

$(document).ready(function() { 
     var key = { 
     LEFT:37, 
     RIGHT:39, 
     UP:38 
     }; 

     $(document).keydown(function(e) { 
      width = $(this).width(); 

      switch(e.which) { 
      case key.LEFT: 
       $('.character').animate({ 
       left:'-=' + width 
       }); 
       break; 

      case key.RIGHT: 
       $('.character').animate({ 
       left:'+=' + width 
       }); 

       break; 
      } 

      e.preventDefault(); 
     }).keyup(function() { 
      $('.character').stop(); 
     }); 
    });