今天我给大家讲一下JavaScript中的显示隐藏、淡入淡出的效果
显示与隐藏动画效果
show()方法:
show()方法会动态地改变当前元素的高度、宽度和不透明度，最终显示当前元素，此时元素的css属性display恢复为除了none之外的初始值。
其语法结构为：jQuery对象.show(duration,[fn]); 其中要注意当参数duration表示动画效果运行的时间，可以使用关键字slow、normal和fast，分别对应时间长度0.6秒、0.4秒和0.2秒，此时参数要加引号；也可以使用数值，单位默认为毫秒，此时参数不需要加引号。
hide()方法：
hide()方法会动态改变当前元素的高度、宽度和不透明度，最终隐藏当前元素，此时元素的css属性display修改为none。
其语法结构为：jQuery对象.hide(duration,[fn]);
对于显示和隐藏我给大家举个例子：
当点击 选项卡时，会使相对应的内容显示，让与其无关的内容隐藏
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/**{margin: 0;padding: 0}*/
span{display: inline-block}
#list{width: 197px;border: solid 1px #cccccc;text-align: center;background-color: #00FFCC}
#list span{width: 60px;height: 30px;background-color: #00FFCC}
#list .biao{background-color: orange}
#con{border: 1px solid #cccccc;width: 197px;}
#con div{border: 1px solid #cccccc;width: 197px;height: 250px}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="list">
<span class="biao">标题一</span>
<span>标题二</span>
<span>标题三</span>
</div>
<div id="con">
<div>内容1</div>
<div style="display:none;height: 250px;">内容2</div>
<div style="display:none;height: 250px;">内容3</div>
</div>
<script>
$(function(){
$("#list span").click(function(){
$(this).addClass("biao").siblings().removeClass("biao");
var index=$("#list span").index(this);
$("#con div").eq(index).show().siblings().hide()
})
})
</script>
</body>
</html>
toggle()方法:
toggle()方法除了可以模拟鼠标的连续单击事件之外，同时还会动态地改变当前元素的高度、宽度和不透明度，最终切换当前元素的可见状态。即如果元素是可见的，则被切换为隐藏状态；如果元素是隐藏的，则被切换为可见状态。
其语法结构为:jQuery对象.toggle(duration,[fn]);
淡入与淡出动画效果
fadeIn()方法 :
fadeIn()方法动态地改变当前元素的透明度(其他不变)，实现淡入的动画效果，最终显示当前元素，此时元素的css属性display恢复除了none之外的初始值。
其语法结构为:jQuery对象.fadeIn(duration,[fn])
fadeOut()方法：
fadeOut()方法动态地改变当前元素的透明度（其他不变），实现淡出的动画效果，最终隐藏当前元素，此时元素的css属性display修改为none。
其语法结构为:jQuery对象.fadeOut(duration,[fn]);
我来给大家展示一个带有淡入淡出的轮播图：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: ;padding: ;list-style: none}
img{width: 800px;height: 400px;}
ul li{width: 800px;height: 400px;display: none}
ul{width: 3200px;height: 400px;}
ul #li1{display: inline;}
#box{width: 800px;height: 400px;position: relative;margin: auto;overflow: hidden;}
ol li{width: 30px;height: 30px;background-color: #2534a9;float: left;border-radius: %;line-height: 30px;text-align: center;margin-right: 5px;color: white;}
ol{position: absolute;height: 30px;right: 15px;bottom: 10px; z-index: auto;}
.lia{background: #F60;color:#fff;}
a{position: absolute;left: 10px;botton:;color: white;font-size: 50px;}
#a1{left: ;top: %;position: absolute;}
#a2{left: 770px;position: absolute;top: %}
</style>
</head> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<body>
<div id="box">
<ul>
<li id="li1"><img src="data:images/buttom_0.jpg"/></li>
<li><img src="data:images/buttom_1.jpg"/></li>
<li><img src="data:images/buttom_2.jpg"/></li>
</ul>
<ol>
<li class="lia"></li>
<li></li>
<li></li>
</ol>
<a href="#" id="a1"><</a>
<a href="#" id="a2">></a>
</div>
<script>
var index=;
var timer=setInterval(function(){
if(index<$("ul li").length-){
index ++;
}else{
index=
}
changeImg(index)
},) $("ol").find("li").each(function(items){
$("this").hover(function(){
clearInterval(timer);
changeImg(items);
index=index
},function(){
timer=setInterval(function(){
if(index<$("ul li").length-){
index ++;
}else{
index=;
}
changeImg(index);
},);
})
}) function changeImg(index){
$("ul li").hide().eq(index).fadeIn();
$("ol li").removeClass("lia").eq(index).addClass("lia");
} $("#a1").click(function(){
index ++;
if(index==$("ul li").length) index;
changeImg(index);
}) $("#a2").click(function(){
index --;
if(index<){
index=$("ul li").length-;
}
changeImg(index);
}) $("img").hover(
function(){
clearInterval(timer);
},
function(){
timer=setInterval(function(){
if(index<$("ul li").length-){
index++;
}else{
index=;
}
$("ul li").hide().eq(index).fadeIn()
$(".ol li").removeClass("lia").eq(index).addClass("lia")
},)
}
) </script>
</body>
</html>
以上是我的简单理解，望大神们提出更好地内容！