How to perfom action only after animate is finished?

Question

I have my code:

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

I want that the input would be disabled when the keypress'ed and it would be enabled only then, when the animation would be executed.

How can I do that?

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

Answer 1

Use a callback:

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

Answer 2

Not good practice to delay events, it is better to use an animation callback function. For example:

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