如何缩短此jQuery单击淡出到下一页代码

如果你点击一个链接，我正在尝试做一个很好的FadeOut。以下代码完美运行。

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

$(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;
    }
});

你的代码实际上看起来已经相当不错了。您可以通过采用箭头函数而不是附加函数来缩短它(不一定更好(，因此您可以关闭链接：

$(document).ready(function () {
  $('a, .fadeLink').on('click', function(e){
     e.preventDefault();
     $('body').fadeOut(1000, () => window.location = this.href);
 });
});

通过在关闭 <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;
    });
});

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

相关内容

最新更新

热门标签：