首页 > 代码库 > 实现渐隐渐现页面跳转
实现渐隐渐现页面跳转
有时我们可能想要从一个页面跳转到另一个页面的过渡变得柔和些，也即是，点击链接后，当前页面渐隐，而后跳转渐显新页面的效果。可以使用jquery轻易实现。
效果：
页面1：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>页面1</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("html").css("opacity","0");
$("html").animate({opacity: 1}, 700);
$("a").click(function() {
var _this = $(this);
$("html").animate({opacity: 0}, 700,function () {
window.location.href = _this.attr("href");
});
return false
});
})
</script>
</head>
<body>
<a href="http://www.mamicode.com/opacity2.html">opacity2</a>
<h2>页面1</h2>
</body>
</html>
页面2：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>页面2</title>
<script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("html").css("opacity","0");
$("html").animate({opacity: 1}, 700);
$("a").click(function() {
var _this = $(this);
$("html").animate({opacity: 0}, 700,function () {
window.location.href = _this.attr("href");
});
return false
});
})
</script>
</head>
<body>
<a href="http://www.mamicode.com/opacity.html">opacity</a>
<h2>页面2</h2>
</body>
</html>
原理：
$(function () {
$("html").css("opacity","0"); /*加载完成后将页面设置为透明*/
$("html").animate({opacity: 1}, 700); /*调用动画函数显示内容*/
$("a").click(function() {
var _this = $(this); /*得到当前a标签并赋值给_this*/
$("html").animate({opacity: 0}, 700,function () { /*关键，调用动画函数将当前页面渐隐，页面隐藏后调用函数*/
window.location.href = _this.attr("href"); /*跳转到a链接的页面*/
});
return false /*关键，点击a后不跳转，等待animate动画完毕后使用js跳转*/
});
})
实现渐隐渐现页面跳转