Question

I’m having an issue with animation. If you see below;

When I press the up arrow, an element jumps up, then falls down. But if I hold down the up arrow, the animation starts, then slows down to a stop. If I let go, it finishes. I want the animation (jumps up, then down) to play once without changing, regardless if I’m holding down the up arrow. Just fire once on keydown, nothing more.

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

Is that possible?

Answer 1

this will check if animation is already running , if it is then you can skip running it again.

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