如何更优雅实现：元素可见时先fadeOut再fadeIn另一元素？

嘿，你的这个需求很常见，原代码的逻辑是对的，但确实可以优化得更简洁清爽，避免重复代码。咱们来看看两种更优雅的写法：

1. 提取重复逻辑为函数（可读性优先） #

把layerB.fadeIn("slow")这个重复执行的逻辑抽成一个独立函数，这样不管是在回调里还是直接调用，都只需要写一次，后续维护也更方便：

// 封装显示layerB的逻辑
const showLayerB = () => layerB.fadeIn("slow");

if (layerA.is(':visible')) {
  layerA.fadeOut("slow", showLayerB);
} else {
  showLayerB();
}

这种写法的好处是逻辑清晰，哪怕是刚接触jQuery的开发者也能一眼看懂，而且以后如果要修改layerB的显示动画（比如调整速度、加额外回调），只需要改showLayerB函数就行，不用改两处。

2. 利用Promise链式调用（简洁性优先） #

jQuery的动画方法会返回一个Deferred对象（可以当成Promise用），我们可以用这个特性把条件判断和异步流程整合到一条链式调用里，代码更紧凑：

// 先判断layerA是否可见，决定是等待fadeOut完成还是直接进入下一步
(layerA.is(':visible') ? layerA.fadeOut("slow").promise() : Promise.resolve())
  .then(() => layerB.fadeIn("slow"));

这里的思路是：如果layerA可见，就执行它的fadeOut并等待动画完成；如果不可见，就直接用Promise.resolve()创建一个已完成的Promise，然后统一在then里执行layerB的fadeIn。整个逻辑连贯，没有冗余代码。

另外提一句，你的原代码有个小语法错误——if语句的闭合括号没写，实际使用时要注意补上哦～

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