Question

当按下按键时，jQuery中是否可以连续移动元素？

我尝试了几种方法，但他们总是在动画调用之间中断。我目前的代码：

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

Answer 1

.animate()并非总是最佳方式。

// 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

而不是动画元素，而只是移动一些像素。 16可能太多了，因为它太快了。

Answer 3

我认为你是因为时间安排而看到动画电话之间的中断。

如果查看操作系统键盘重复时间间隔，则应该在35毫秒左右 - test it here。

最重要的是，你每10分钟动画一次，不计算运行所有动画功能所花费的时间等等。那么为什么不简化动画而不用担心时间间隔（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);
});

按住键时连续移动

3 个答案: