如何简化点击链接触发页面淡出跳转的jQuery代码？

嘿，很高兴帮你简化这段链接平滑淡出的代码！你的现有逻辑完全没问题，我们可以通过减少冗余、优化变量作用域来让代码更清爽。

第一种简化方式：保持可读性的紧凑版 #

把全局变量和单独的回调函数合并到事件处理内部，避免不必要的全局污染：

$(document).ready(function () {
  $('a, .fadeLink').on('click', function(e){
    e.preventDefault();
    // 把变量放在事件内部，避免全局作用域污染
    const targetHref = this.href;
    $('body').fadeOut(1000, () => {
      window.location = targetHref;
    });
  });
});

第二种极致简化版：利用jQuery简写和箭头函数 #

如果追求更短的代码，还可以用jQuery的$(function(){})替代$(document).ready()，同时直接在回调里使用this.href：

$(function () {
  $('a, .fadeLink').on('click', function(e){
    e.preventDefault();
    // 箭头函数继承外层的this，直接指向被点击的元素
    $('body').fadeOut(1000, () => window.location = this.href);
  });
});

简化的核心要点： #

• 去掉了全局的newLocation变量，把它移到点击事件内部，缩小变量作用域，避免潜在的冲突
• 把单独声明的changeLocation函数换成了内联箭头函数，减少代码冗余
• 第二种版本用了jQuery的简写语法，让代码更简洁但依然清晰

两种写法的功能和原代码完全一致，你可以根据自己的代码风格选择～

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