用jquery淡出整个页面

Posted 2023-05-08

【中文标题】用jquery淡出整个页面

【英文标题】：Fading out a whole page with jquery

【发布时间】：2013-10-24 05:15:34

【问题描述】：

所以，当用户转到我网站的另一个部分时，我试图淡出页面。在阅读了一些关于堆栈溢出的内容后，我编写了以下代码。但它看起来很混乱/丑陋。是否有适当的方法来淡出网页，或者这一切都是 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>

【问题讨论】：

浏览器会在动画完成之前转储页面（在大多数情况下）。

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

嗯，我现在没有看到这种闪烁，但它会发生似乎是合理的。但更紧迫的问题：would not display:none 只会导致非 jquery 快乐的计算机看不到我的网站？

【参考方案1】：

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

$(document).fadeOut();

或

$("html").fadeOut();

---

在阅读了您的 cmets 后，我了解到您希望在单击链接时淡出页面。

不要使用$(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;
);

【讨论】：

好的，所以，我试过把它放进去，但它在卸载之前就转储了页面。您可以按原样查看我的页面 - www.catlard.com - 例如，当您单击“教学”部分时，它不起作用。有什么办法可以让它工作吗？我已经更新了上面的代码以反映您的答案。

@CaTLard 我已经更新了我的答案。使用$(document).on("click", "a" handler) 而不是unload。

你发布的代码很神奇，解决了我所有的问题。我会努力理解的！我认为有几件事我还不明白......其中大部分围绕着我不知道哈希是什么，或者位置对象是什么。我可能很容易弄清楚。但是你能解释一下为什么 return false 会阻止默认的浏览器行为吗？这只是 jQuery 中 .on() 函数的一部分吗？非常感谢！

@CaTLard 好。请参阅代码中的 cmets，对于 return false; 部分，请参阅 this topic。例如，如果您从这段代码中删除return false;，浏览器将直接加载新页面（新链接），并且淡出效果将消失。这就是我们在这里使用它并从 js 端设置新位置的原因。 return false; 也用于通过 ajax 提交表单（无需重新加载页面）。在链接问题的答案中阅读更多信息。 :-) 如果您有任何问题，请尽管提出。