堆叠 jQuery 事件（动画）

【问题标题】：Stacking jQuery Events (Animate)堆叠 jQuery 事件（动画）
【发布时间】：2015-03-27 18:52:34
【问题描述】：

我正在尝试为一个元素设置动画，然后在动画结束时添加一个类：

                $(this).animate({ width: "1em" }, 500);
                $(this).addClass("hidden");

但是 addClass 立即发生。

有没有办法说“等到动画完成”？

【问题讨论】：

【解决方案1】：

animate中有回调函数：

 $(this).animate({ width: "1em" }, 500, function(){
      $(this).addClass("hidden");
 });

【讨论】：

【解决方案2】：

$(this).animate({ width: "1em" }, 500, function(e){

   // Animation complete.
   $(e).addClass("hidden");
  });
);

回调函数就是你想要的。
http://api.jquery.com/animate/

【讨论】：

【解决方案3】：

使用回调函数，像这样：

(function(elm){
    $(elm).animate({width: "1em"}, 500, function(){ 
        $(elm).addClass("hidden");
    });
})($(this));

外部函数调用是通过将元素绑定到函数来确保调用addClass事件时调用正确的元素，而不是依赖this。

其他解决方案在大多数情况下都可以并且将会起作用，但是，这个额外的位只是确保正确的元素始终是回调函数中的目标。

【讨论】：