堆叠 jQuery 个事件（动画）

Question

我正在尝试为元素设置动画，然后在动画结束后添加 class:

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

但是 addClass 会立即发生。

有没有办法说，"Wait till Animation is done"？

Answer 1

使用回调函数，像这样：

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

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

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

JSFiddle

Answer 2

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

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

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

Answer 3

animate中有回调函数：

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