Question

所以，当用户访问我网站的另一部分时，我试图淡出页面。在读取堆栈溢出后，我编写了以下代码。但它似乎凌乱/丑陋。是否有适当的方式来淡出网页，还是一切都是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>

Answer 1

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

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

使用jquery淡出整个页面

1 个答案: