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

这是jsfiddle

Answer 1

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

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

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

在keydown上平滑animate（）

2 个答案: