show()方法具体用法：
show()
show(duration , [callback])
show([duration] , [easing] , [callback])
1) 参数duration表示一个字符串或者数字，决定动画将运行多久
2) 参数callback表示在动画完成时执行的函数
3) 参数easing表示一个用来表示使用哪个缓冲函数来过渡的字符串
一、简单的显示和隐藏
基本的hide（）和show（）方法，不带任何参数，，立即显示或隐藏，不带任何动画效果
hide() ： 将匹配元素集合的内联style属性设置为display:none
聪明之处：变none之前，记住原来的值（通常为block或inline）
show() ： 恢复为应用display:none之前的可见属性。
二、控制显示速度
当在show()或hide()中指定一个速度参数时，就会产生动画效果。
hide（‘speed’）：同时减小元素的高度，宽度和不透明度，直至都达到0，并应用display:none。
show（‘speed’）：从上到下增大元素的高度，从左到右增大元素的宽度，从0到1增加元素的不透明度，直至完全可见。
对于jQuery提供的任何效果，都可指定3种速度参数：show(“slow”)（0.6s）、show(“normal”)（0.4s）、show(“fast”)（0.2s）
更精确的话，可用毫秒数值 如：show(850)
注：slow、normal、fast 作为参数要加引号；数值不用
例：
三、显隐切换
toggle()方法
切换元素的可见状态
toggle([duration] , [callback])
toggle([duration] , [easing] , [callback]);
toggle(showOrHide)
1) 参数duration表示一个字符串或者数字，决定动画将运行多久
2) 参数callback表示在动画完成时执行的函数
3) 参数easing表示一个用来表示使用哪个缓冲函数来过渡的字符串
4) 参数showOrHide是一个布尔值，指示显示或隐藏元素 true ：show（）；false：hide（）$('.target').toggle() 立即切换 可恢复
有时间参数时，成为动画方法
持续时间以毫秒为单位 ，数值越大，动画越慢 slow：600 fast：200
如果提供回调函数参数，回调函数会在动画完成时调用，这对于将不同的动画串联在一起按顺序排列是非常有用的。这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，值得注意的是，每执行一次回调函数，this就匹配当前元素，而不是作为一个整体的动画一次。
四、折叠动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>折叠动画</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () { //页面初始化处理函数
var t = []; //定义空数组
var dt = $("dl.collapse dt"); //获取名为collapse的dl元素包含的所有dt子元素
var dd = $("dl.collapse dd"); //获取名为collapse的dl元素包含的所有dd子元素
dt.each(function (i) { //遍历所有的dt元素，并向函数传递遍历编号
t[i] = false; //初始状态
$(dt[i]).click((function (i, dd){ //为当前dt元素绑定click事件处理函数
return function () {
if(t[i]){
$(dd).show(); //显示元素
t[i] = false;
}else {
$(dd).hide(); //隐藏元素
t[i] = true;
}
}
})(i,dd[i])); //向当前执行的函数中传递参数
})
})
</script>
<style type="text/css">
.collapse{border: solid 1px #ccc;margin:2px;float: left;}
.collapse dt{padding: 8px 8px;background: #7fecad;font-size: 13px;font-weight: bold;color: #71790c;border-bottom: solid 1px #efefef;cursor: pointer;}
.collapse dd{margin: 0;padding: 6px;}
.w1{width: 310px;}
.w2{width: 221px;}
.w3{width: 665px;}
</style>
</head>
<body>
<dl class="collapse w1">
<dt>音乐标签</dt>
<dd><img src="images/pic1.jpg" width="100" height="100"/></dd>
</dl>
<dl class="collapse w2">
<dt>新歌TOP100</dt>
<dd><img src="images/pic2.jpg" width="100" height="100"/></dd>
</dl>
<dl class="collapse w3">
<dt>音乐掌门人</dt>
<dd><img src="images/pic3.jpg" width="100" height="100"/></dd>
</dl>
</body>
</html>
考虑到元素遍历过程中，动态定位元素比较困难，这里使用了闭包函数存储元素的序列位置。由于在闭包中无法访问闭包函数外的对象，故还需要向其传递当前要操作的元素对象。
注意：在多层嵌套结构中大括号和小括号的使用，避免缺少小括号运算符，如：
$(dt[i]).click((function (i, dd){//...})(i,dd[i]));
五、树形动画
1.（JavaScript实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>树形动画（js）</title>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload = function () { //页面初始化处理函数
var li = document.getElementsByTagName("li"); //获取页面中所有li元素
var t = []; //定义临时数组
for(var i = 0 ; i < li.length ; i++) //遍历数组
{
var child = li[i].childNodes; //获取当前li元素包含的所有子节点
var b = false; //定义临时变量，并初始化为false
for(var j=0; j < child.length; j++) //遍历当前li元素包含的节点，并检测是否包含ul元素
{
if(child[j].nodeType == 1 && child[j].nodeName.toLowerCase() == "ul")
{
b = true; //如果li元素包含ul元素，则设置b为true
}
}
if(b) //如果li元素包含ul元素
{
li[i].style.cursor = 'pointer'; //定义当前li元素的鼠标指针样式为手型
li[i].listStyleImage = 'url(images/+.gif)'; //修改当前li元素的选项列表图标形状
var ul = li[i].getElementsByTagName("ul")[0]; //获取第一个ul子元素
ul.style.display = "none"; //隐藏第一个ul元素
t[i] = true; //设置当前序号位置的数组元素的值为true
li[i].onclick = (function (o, li, i) { //绑定click单击事件处理函数
return function (e) { //返回闭包函数
if(li == e.target || li == window.event.srcElement){ //如果当前元素就是事件触发的目标对象，则允许执行。这样做的目的是防止单击当前li元素的子元素时，也触发click事件
if(t[i]) //如果当前数组元素值为true
{
o.style.display = ""; //恢复显示ul元素
li.style.listStyleImage = 'url(images/-.gif)'; //修改li元素项目列表符号
t[i] = false; //切换当前数组值为false
}else{ //如果当前数组元素值为false
o.style.display = "none"; //隐藏显示ul元素
li.style.listStyleImage = 'url(images/+.gif)'; //修改li元素项目列表符号
t[i] = true; //切换当前数组值为true
}
}
if(e && e.stopPropagation) //兼容非IE浏览器
{
e.stopPropagation(); //阻止事件传播
}else{ //兼容IE浏览器
window.event.cancelBubble = true; //阻止事件传播
}
return false
}
})(ul,li[i],i); //调用当前函数，并传递当前li元素及其包含的第一个ul元素，以及当前li元素位置的序号
}
else //如果li元素不包含ul元素
{
li[i].style.cursor = 'default'; //恢复li元素的鼠标默认样式
li[i].listStyleImage = 'none'; //恢复li元素的默认列表项目符号
}
}
}
</script>
</head>
<body>
<ul class="tree">
<li>首页</li>
<li>新闻
<ul>
<li>国内新闻</li>
<li>国际新闻</li>
</ul>
</li>
<li>科技
<ul>
<li>桌面科技</li>
<li>移动科技
<ul>
<li>iPhone</li>
<li>HTC</li>
<li>Android</li>
</ul>
</li>
<li>应用科技</li>
</ul>
</li>
<li>社会</li>
</ul>
</body>
</html>
注意：
（图摘自W3School）
2.（jQuery实现）
<script type="text/javascript">
$(function(){ //页面初始化处理函数
$('li:has(ul)').click(function(event){ //如果li元素包含ul元素，则绑定click事件
if(this == event.target){ //如果当前li元素就是事件触发的目标对象
if($(this).children().is(':hidden')){ //如果当前li元素的子元素隐藏，则修改li元素的项目列表符号，并显示所有元素
$(this).css('list-style-image','url(images/-.png)').children().show();
}
else{ //否则修改li元素的项目列表符号，并隐藏所有子元素
$(this).css('list-style-image','url(images/+.png)').children().hide();
}
}
return false;
}).css({ //设置包含ul子元素的li元素的样式
cursor:'pointer', //设置鼠标样式为手型
'list_style-image':'url(images/+.png)' //设置项目列表符号为加号样式
}).children().hide(); //隐藏li元素的所有子元素
$('li:not(:has(ul))').css({ //如果li亚努没有包含ul元素，则设置如下样式
cursor:'default', //恢复默认的鼠标样式
'list-style-image':'none' //恢复默认的项目列表符号
})
});
</script>六、选项卡动画
1.JavaScript实现
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>选项卡动画（JavaScript实现）</title>
<script src="js/jquery2.1.3.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var tab = document.getElementsByClassName("tab")[0]; //获取选项卡的外框
var ul = tab.getElementsByTagName("ul")[0]; //获取选项卡标题栏的外框
var ol = tab.getElementsByTagName("ol")[0]; //获取选项卡内容框的外框
var uli = ul.getElementsByTagName("li"); //获取所有标题栏选项
var oli = ol.getElementsByTagName("li"); //获取所有内容选项
for(var i = 0 ; i < uli.length ; i++) //遍历标题栏选项
{
uli[i].className = "normal"; //设置所有标题栏选项的类样式为普通样式
}
for(var i = 0 ; i < oli.length ; i++) //遍历内容框选项
{
oli[i].className = "none"; //设置所有内容框选项的类样式为隐藏
}
uli[0].className = "hover"; //设置第一个标题栏选项为凸起显示
oli[0].className = "show"; //设置第一个内容框选项为显示出来
var addEvent = function(e,fn){ //自定义绑定mouseover事件函数
if(document.addEventListener){ //兼容非IE浏览器
return e.addEventListener("mouseover",fn,false);
}
else if(document.attachEvent){ //兼容非IE浏览器
return e.attachEvent("onmouseover",fn);
}
};
for(var j=0;j<uli.length;j++) //遍历标题栏选项
{
(function(j,uli,oli){ //调用匿名函数
addEvent(uli[j],function(){ //为当前标题栏选项元素绑定mouseover事件
for(var n=0;n<uli.length;n++){ //遍历标题栏选项
uli[n].className = "normal"; //恢复所有标题栏选项为凸起效果
oli[n].className = "none"; //隐藏所有内容框选项
}
uli[j].className = "hover"; //设置当前标题栏为凸起效果
oli[j].className = "show"; //显示当前标题栏对应的内容框选项
});
})(j,uli,oli); //把当前序号，标题栏选项数组和内容框选项数组传递进去
}
}
</script>
<style>
.tab{width: 1600px;}
ul,li,ol{display: block;margin: 0;padding: 0;}
ul li{float: left;width: 100px;height: 30px;border: 1px solid #ccc;text-align: center;line-height: 30px;}
.clear{clear: both;}
ol li{float: left;position: relative;width: 100%;height: 100%;}
ol{width: 700px;height:500px;border: 1px solid #ccc;overflow: auto;}
.show{display: block;}
.none{display: none;}
.normal{color: #000;background: #fff;}
.hover{color: #fff;background: #ccc;}
img{position: relative;margin: 0 auto;display: block;}
</style>
</head>
<body>
<div class="tab">
<ul><!--选项卡标题框-->
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<div class="clear"></div>
</ul>
<ol><!--选项卡内容框-->
<li><img src="images/1.jpg" width="500"/></li>
<li><img src="images/2.jpg" width="500"/></li>
<li><img src="images/3.jpg" width="500"/></li>
</ol>
</div>
</body>
</html>
2.jQuery实现：
<script type="text/javascript">
$(function(){ //页面初始化事件处理函数
var $uli = $(".tab ul li"); //获取所有标题栏选项元素
var $oli = $(".tab ol li"); //获取所有内容框选项元素
$uli.addClass("normal"); //为所有标题栏选项元素添加普通类样式
$oli.addClass("none"); //为所有内容框选项元素添加为隐藏类样式
$uli[0].className = "hover"; //初始化第一个标题栏选项显示为凸起效果
$oli[0].className = "show"; //初始化第一个内容框选项显示出来
$uli.each(function(n){ //遍历所有标题栏选项
$(this).mouseover(function(){ //为每个选项绑定mouseover事件处理函数
$uli.removeClass().addClass("normal"); //移出所有标题栏选项的类样式，恢复普通显示状态
$(this).removeClass().addClass("hover"); //移出所有类样式,为当前标题栏选项元素设置凸起显示状态
$oli.removeClass().addClass("none"); //移出所有内容框选项的类样式，恢复隐藏显示状态
$($oli[n]).removeClass().addClass("show"); //移出所有类样式,为当前内容框选项元素设置显示状态
})
})
})
</script>
117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
