如何在动画完成后执行操作？

Question

我有我的代码：

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

当keypress时，我希望输入框被禁用，并且只有在动画执行时才启用。

我该如何实现？

编辑：我刚意识到可以这样做：$(this).delay(200).attr("disabled","");。这是好的做法吗？

- good_evening

Answer 1

使用回调函数：

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

- Mrchief

---

能否在像click、mouseover等函数上使用回调函数？这样就可以确保在未完成时不会被调用了吗？ - good_evening

我可以在函数中像这样使用回调吗 $('.button_class').click('function(e) {? - good_evening

是的。$（'.button_class'）.click（function（e）{ /代码/ }）;。请注意，我删除了函数前面的引号，不确定是否为打字错误。 - Mrchief

可以同时使用指定缓动效果吗？ - Uri Abramson

Answer 2

延迟事件不是一个好的实践，最好使用动画回调函数。例如：

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

- Tak

Answer 3

尝试类似以下的代码：

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

- Luke

---

回调函数在动画元素的上下文中被调用的宝贵示例。 - katspaugh