今天我给大家讲一下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{ 197px;border: solid 1px #cccccc;text-align: center;background-color: #00FFCC}
#list span{ 60px;height: 30px;background-color: #00FFCC}
#list .biao{background-color: orange}
#con{border: 1px solid #cccccc; 197px;}
#con div{border: 1px solid #cccccc; 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: 0;padding: 0;list-style: none} img{ 800px;height: 400px;} ul li{ 800px;height: 400px;display: none} ul{ 3200px;height: 400px;} ul #li1{display: inline;} #box{ 800px;height: 400px;position: relative;margin: 0 auto;overflow: hidden;} ol li{ 30px;height: 30px;background-color: #2534a9;float: left;border-radius: 50%;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:0;color: white;font-size: 50px;} #a1{left: 0;top: 40%;position: absolute;} #a2{left: 770px;position: absolute;top: 40%} </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="images/buttom_0.jpg"/></li> <li><img src="images/buttom_1.jpg"/></li> <li><img src="images/buttom_2.jpg"/></li> </ul> <ol> <li class="lia">1</li> <li>2</li> <li>3</li> </ol> <a href="#" id="a1"><</a> <a href="#" id="a2">></a> </div> <script> var index=0; var timer=setInterval(function(){ if(index<$("ul li").length-1){ index ++; }else{ index=0 } changeImg(index) },2500) $("ol").find("li").each(function(items){ $("this").hover(function(){ clearInterval(timer); changeImg(items); index=index },function(){ timer=setInterval(function(){ if(index<$("ul li").length-1){ index ++; }else{ index=0; } changeImg(index); },2500); }) }) function changeImg(index){ $("ul li").hide().eq(index).fadeIn(1000); $("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<0){ index=$("ul li").length-1; } changeImg(index); }) $("img").hover( function(){ clearInterval(timer); }, function(){ timer=setInterval(function(){ if(index<$("ul li").length-1){ index++; }else{ index=0; } $("ul li").hide().eq(index).fadeIn(1000) $(".ol li").removeClass("lia").eq(index).addClass("lia") },3000) } ) </script> </body> </html>
以上是我的简单理解，望大神们提出更好地内容！