平滑 animate() of div on keydown()

Question

我正在尝试让 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();
});

这里是 jsfiddle

Answer 1

问题仅仅是因为您使用了 animate() 和 stop()。每次按下一个键重新绘制 UI 时，keydown 函数都会触发一次；这可能是每秒数百次甚至数千次。因此，您正在定义一个动画并为每个事件停止它。

更好的方法是在每次引发 keydown 事件时仅从 .character 元素的 left 位置添加或减去。像这样：

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

另请注意，要在委托事件处理程序中获取所需元素的宽度，您需要直接使用 .character 选择器，因为 this 将引用 document。

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

平滑 animate() of div on keydown()

smooth animate() of div on keydown()

jquery

keydown

jquery-animate