一直对前端的东西掌握的不是太好,最近抽出点时间稍微学点jQuery。感觉确实很好用，提供了一些现成的好东西，还能跨浏览器。
这里就通过一个折叠菜单的实现，记录一下几种常用的动画效果。
一、目标效果
HTML代码：
HTML
菜单折叠及展开时的效果：
二、最直接的切换--hide()，show()，toggle（）
- Hide(speed,callback):将元素display值变为none。
- Show(speed,callback) ：将隐藏的相应元素变为可见。
- Toggle(speed,callback) ：改变当前的显示状态，可以简化hide和show方法的轮换调用。
其实，除了以上两个例子中突然改变元素的可见性外。还可以设定speed参数，控制改变的速度，该参数可以为毫秒数或者指定字符slow,normal,fast。
1. 首先直接使用Show()和Hide方法来实现。
这个功能主要的几点：①实现子菜单的隐藏和显示控制；②改变父级菜单的+-号；③改变鼠标经过时指针形状。
$(document).ready(function () {
//加载时隐藏子菜单
$('li ul').hide();
//不包含子菜单时鼠标指针和项目图标
$('li:not(:has(ul))')
.css({ 'cursor': 'default', 'list-style-image': 'none' });
//包含子菜单时鼠标指针和项目图标
$('li:has(ul)')
.css({ 'cursor': 'pointer', 'list-style-image': 'url(plus.gif)' });
//单击含子菜单的项
$('li:has(ul)').click(function (event) {
if (this == event.target) {
if ($(this).children().is(':hidden')) {
$(this)
.css('list-style-image', 'url(minus.gif)')
.children().show();
}
else {
$(this)
.css('list-style-image', 'url(plus.gif)')
.children().hide();
}
}
})
})
2. 更简单的切换--toggle()方法
方案二：
//单击含子菜单的项
$('li:has(ul)').click(function (event) {
if (this == event.target) {
$(this).css('list-style-image', ($(this).children().is(':hidden') ? 'url(minus.gif)' : 'url(plus.gif)'));
$(this).children().toggle();
}
})
3. 给切换来个限速，设置speed参数。
三、淡入淡出--FadeIn(),FadeOut()
- FadeIn(speed,callback) ：将非隐藏的指定元素不透明度降为0%，然后从显示器上删除。speed为毫秒数或指定字符slow,normal,fast。callback为回调函数。
- FadeOut(speed,callback)：将隐藏的指定元素的不透明度提高到初始值。参数同上。
- FadeTo(speed,opacity,callback)：调整指定元素的不透明度至指定值。opacity为0-1.0之间的值。其他参数同上。
将方案一略作修改：
经过测试，FadeTo(‘slow’)和FadeTo(‘slow’,0)两个方法还是有区别的。FadeTo方法可以将元素的不透明度设置为0，但是元素所占的位置不会从屏幕上消失。
四、滑上滑下-SlideDown(),SlideUp(),SlideToggle()
- SlideDown(speed,callback)：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
- SlideUp(speed,callback)：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
- SlideToggle(speed,callback)：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
可以将方案一改为：
或者将方案二改为
本文转自 陈敬（Cathy） 博客园博客，原文链接：
http://www.cnblogs.com/janes/archive/2011/09/02/2163925.html，如需转载请自行联系原作者
