Question

我遇到动画问题。如果你看到以下内容;

当我按向上箭头时，元素会跳起，然后会下降。但是，如果我按住向上箭头，动画开始，然后减速停止。如果我放手，它就会结束。无论我是否按住向上箭头，我都希望动画（跳起，然后向下）播放一次而不会改变。只需在keydown上开火一次，仅此而已。

$('body').keydown(function(e){
    e.stopPropagation();
    if (e.keyCode == '38') { keyU = true; }
});

$('body').keyup(function(e){
    e.stopPropagation();
    if (e.keyCode == '38') { keyU = false; }
});

var tick = function() {
    if (keyU) {
        jump();
    }
}

setInterval( function() {
    rotate();
    tick();
  }, 100 );

var jump = function(){
    $("#Character").stop(true).animate({ top: "50px" },{ duration: 1000, easing: "easeOutQuad" }).animate({ top: "200px" },{ duration: 1000, easing: "easeInQuad" });
}

这可能吗？

Answer 1

这将检查动画是否已经在运行，如果是，则可以跳过再次运行。

$('body').keydown(function(e){
    e.stopPropagation();
    if (e.keyCode == '38') { 
          if ($('#Character').is(':animated')) {
           //code for animation already running
              }
          else{  keyU = true; }
     }
});

动画在Keydown上减慢

1 个答案: