How to perforate an action only after the animation is completed?

Question

I have a code:

$(this).attr("disabled","disabled");
$(this).animate({'opacity':'0.6'}, 200);
$(this).animate({'opacity':'1'}, 200);
$(this).attr("disabled","");

I want the input to be disabled when keypress'ed, and it will only be enabled when the animation is done.

How can i do this?

Edit: I just realized that I could do this: $(this).delay(200).attr("disabled","");. Is this a good practice?

Answer 1

Use callback:

$(this).animate({'opacity':'0.6'}, 200, function() {
    // Animation complete.
  });

Answer 2

Bad practice for delaying events, it is better to use the animation callback function. For instance:

$(this).animate({'opacity':'1'}, 200, function(){
  $(this).attr("disabled","");
});

Answer 3

- :

$(this).animate({ 'opacity': '1' }, 200, function () {   
    $(this).attr('disabled', '');   
});