所以,当用户访问我网站的另一部分时,我试图淡出页面.在读取堆栈溢出后,我编写了以下代码.但它似乎凌乱/丑陋.是否有适当的方式来淡出网页,还是一切都是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>
解决方法
对文档或“html”使用fadeOut()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;
});
