如何缩短这个 jQuery onClick FadeOut to next Page 的代码？

Question

如果您单击 Link，我正在尝试做一个很好的 FadeOut。以下代码完美运行。

我的问题是：如何缩短这些功能？ 演示：Here

$(document).ready(function () {
    var newLocation = '';
    $('a, .fadeLink').on('click', function(e){
        e.preventDefault();

        newLocation = this.href;

        $('body').fadeOut(1000, changeLocation);
    });

    function changeLocation() {
       window.location = newLocation;
    }
});

Answer 1

您的代码实际上看起来已经很不错了。您可以通过使用箭头函数而不是附加函数来缩短它（不一定更好），这样您就可以关闭 link:

$(document).ready(function () {
  $('a, .fadeLink').on('click', function(e){
     e.preventDefault();

     $('body').fadeOut(1000, () => window.location = this.href);
 });
});

Answer 2

您可以通过在关闭 <body> 标签之前放置 JavaScript 代码来失去 $(document).ready 功能。此外，您不必在上层范围内定义 newLocation，您可以将其传递给 changeLocation 函数：

$('a, .fadeLink').on('click', function(e) {
    e.preventDefault();

    var location = this.href;

    $('body').fadeOut(1000, function() {
        changeLocation(location);
    });
});

function changeLocation(location) {
    window.location = location;
}

您也可以删除 changeLocation 函数：

$('a, .fadeLink').on('click', function(e){
    e.preventDefault();

    var location = this.href;

    $('body').fadeOut(1000, function() {
        window.location = location;
    });
});

归根结底，这是一个偏好问题。请记住，更紧凑的代码并不总是更好的代码。

如何缩短这个 jQuery onClick FadeOut to next Page 的代码？

How to shorten this jQuery onClick FadeOut to next Page code?

javascript

jquery

fadeout