Question

Let’s say I have two div, #move and #object respectively,

and a function thats move #object when click on #move

$("#move").click(function(){
$("#object").animate({
    "left": "+=1px"
}
  );
    })

How can I abandon or change the Function after
it had been executed a particular number of times using .Keyup() event or something?

Answer 1

var count = 0;
$("#move").on('click', function(){
   count++;
   $("#object").animate({
     "left": "+=1px"
   });
})

Suppose, if you want to off the animation event when key up occurs on any input

$('SOME_ELEMENT').on('keyup', function() {  // SOME_ELEMENT is any valid selector

   if(count === 3) { // I assume after 3 times animation you will unbind/off it
     $('#move').unbind('click');  //  or $('#move').off('click');
   }

});

Suppose, if you want to off the animation event when use press ESC key

$(document).on('keyup', function(e) {

     if(e.which === 27 && count === 3) { // 27 is keycode of ESC key
        $('#move').off('click');
     }
   });