无意之中，看到一个网站的内容导航效果，所以就想去了解学一下，发现效果挺不错。下面就直接贴出代码，防止遗忘。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击导航栏，所需内容渐入渐变的效果</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".btn1").click(function(){//点击类名为：btn1的对象时
$(".text2").fadeOut(1000);//类名为text2的元素逐渐隐藏。时间为1000毫秒(可选)
$(".text1").fadeIn(1000);//类名为text1的元素逐渐出现。时间为1000毫秒(可选)
});
$(".btn2").click(function(){
$(".text1").fadeOut(1000);
$(".text2").fadeIn(1000);
});
});
</script>
<style>
.text1{width:200px;height:200px;background:red;position:absolute}
.text2{width:200px;height:200px;background:pink;position:absolute}
main{width:400px;height:400px;border:1px solid green;position:relative}
</style>
</head>
<body>
<button class="btn1">显示第一个div</button>
<button class="btn2">显示第二个div</button>
<main>
<div class="text1">
这是第一个div。
</div>
<div class="text2">
这是第二个div。
</div>
</main>
</body>
</html>
fadeIn() 方法逐渐改变被选元素的不透明度，从隐藏到可见（褪色效果）。
fadeOut() 方法逐渐改变被选元素的不透明度，从可见到隐藏（褪色效果）。
注释：隐藏的元素不会被完全显示（有定位的话会发生改变）。
语法：$(selector).fadeIn/fadeOut(speed,easing,callback)；
要实现跳转页面有渐入的效果，可以在fadenIn前加句隐藏，先把需要渐变的内容隐藏掉。
<script type="text/javascript">
$(function(){
$(".box").hide();
$(".box").fadeIn(1000);
});
</script>
1528
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
