使用jQuery实现整个页面的淡出效果

Question

使用jQuery实现整个页面的淡出效果

9

所以，我试图在用户转到我的网站的另一个部分时淡出页面。在阅读了一些关于stack overflow的内容后，我编写了以下代码。但它看起来很乱/丑陋。是否有一种适当的方式淡出网页，还是全部都是hacky的？目前似乎我的页面在淡出之前就被取消了。

<link rel="stylesheet" href="http://www.catlard.com/styles/body.css" type="text/css"/>
<link rel="icon" href="http://www.catlard.com/caticon.ico" />
<link rel="shortcut icon" href="http://www.catlard.com/caticon.ico?v=2" />
<script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"> </script>
<script type="text/javascript">
    $(document).ready( function(){
        $("html").hide();
        $("html").delay(250).fadeIn();  
        $(window).unload(function () {
            $("html").fadeOut();
        });
    });
</script>

- Catlard

2

在大多数情况下，动画还没有完成，浏览器就会先卸载页面。 - ahren

1

$(document).ready( function(){ $("html").hide(); 你是想在任何人看到页面之前隐藏它吗？ $(document).ready 会在其他内容加载后发生，所以我猜目前你可能会看到页面加载一秒钟，然后闪烁并消失，然后淡入？如果是这样，你可能想在加载之前使用 display:none，而不必担心 $("html").hide();。 - SubjectCurio

目前我没有看到闪烁的情况，但是似乎这种情况很有可能发生。但更紧迫的问题是：display:none难道不会导致不支持jQuery的计算机无法看到我的网站吗？ - Catlard

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ionică Bizău · Accepted Answer

使用fadeOut() jQuery 函数针对document或"html"：

$(document).fadeOut();

或者

$("html").fadeOut();

阅读您的评论后，我理解您想要在单击链接时淡出页面。

不要使用$(window).unload，而是检测链接上的点击事件，并手动设置位置以防止默认的浏览器行为。

// delegate all clicks on "a" tag (links)
$(document).on("click", "a", function () {

    // get the href attribute
    var newUrl = $(this).attr("href");

    // veryfy if the new url exists or is a hash
    if (!newUrl || newUrl[0] === "#") {
        // set that hash
        location.hash = newUrl;
        return;
    }

    // now, fadeout the html (whole page)
    $("html").fadeOut(function () {
        // when the animation is complete, set the new location
        location = newUrl;
    });

    // prevent the default browser behavior.
    return false;
});