keydown（）のdivのスムーズなアニメーション（）

Question

私はkeydownのdivの連続的な動きを得ようとしています。動きは始まりますが、動きが遅くなり、動きが鈍くなります。どうすればこの問題を解決できますか？ここ

$(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(); 
}); 

とは、あなたがanimate()とstop()を使用しているので、問題は単純であるjsfiddle

Answer 1

です：ここに私のコードです。​​関数は、キーが押された状態でUIが再描画されるたびに一度呼び出されます。これは潜在的に数百または数千回/秒です。したがって、あなたはアニメーションを定義し、それらのイベントごとにアニメーションを停止していました。

より良いアプローチは、​​イベントが発生するたびに、.character要素の位置を加算または減算することです。このような何か：

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

はまた、あなたの委任イベントハンドラに必要な要素の幅を取得することに注意してくださいあなたはdocumentを参照しますthisとして直接.characterセレクタを使用する必要があります。

Answer 2

前述のように、stop（）関数は本質的にアニメーションを停止しています。 あなたは単にそれを削除しようとすることができ、時間を説明するための 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(); 
     }); 
    });