如何等待slideUp与animate动画全部完成后再执行后续代码

首先修正你现有代码的写法问题：你将duration: 'fast'写在了animate的CSS属性参数对象内，这是无效的——jQuery会尝试对不存在的durationCSS属性做动画，不会将其识别为动画时长配置。animate的时长参数需要放在属性对象之后，或是写到独立的配置对象里。

要等slideUp和animate两个动画全部执行完成后再运行后续代码，有两种成熟的实现方式：

方法1：使用动画队列Promise（推荐，适配串行/并行动画场景） #

jQuery的动画队列自带Promise支持，调用.promise()后会在当前元素所有关联动画全部执行完成后触发done回调，不管动画是串行执行还是并行执行都能正确等待：

$('#something')
  .slideUp('fast')
  .animate({ opacity: 0 }, 'fast') // 修正duration参数位置
  .promise()
  .done(function() {
    // 此处写两个动画全部完成后要执行的逻辑
  });

如果你希望两个动画同时并行执行（默认是先执行slideUp、再执行透明度动画的串行逻辑），可以给animate加queue: false配置，Promise依然能正确等待两个动画全部结束：

$('#something')
  .slideUp('fast')
  .animate({ opacity: 0 }, {
    duration: 'fast',
    queue: false // 不进入默认动画队列，和slideUp同时启动
  })
  .promise()
  .done(function() {
    // 两个并行动画全部结束后才会执行这里
  });

方法2：给最后一个动画传完成回调（简单场景适用） #

jQuery默认动画是按调用顺序串行排队执行的，因此直接把回调作为最后一个animate方法的完成参数传入即可，等最后一个动画跑完时，前面的slideUp必然已经执行完成：

$('#something').slideUp('fast').animate(
  { opacity: 0 },
  'fast',
  function() {
    // 此处写两个动画全部完成后要执行的逻辑
  }
);

注意这种写法只适用于动画串行执行的场景，如果给animate加了queue: false让动画并行，回调只会等animate执行完就触发，不会等待还在运行的slideUp。

内容的提问来源于stack exchange，提问作者arresteddevelopment