JQuery学习系列（六）效果
jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
（一）隐藏和显示
通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：
实例
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() 和 show() 都可以设置两个可选参数：speed 和 callback。
语法：
$(selector).hide(speed,callback) $(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
实例
$("button").click(function(){
$("p").hide(1000);
});
（二）切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
语法：
$(selector).toggle(speed,callback)
speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
实例
$("button").click(function(){
$("p").toggle();
});
（三）滑动
jQuery 拥有以下滑动函数：
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
$(".flip").click(function(){
$(".panel").slideDown();
});
slideUp() 实例
$(".flip").click(function(){
$(".panel").slideUp()
})
slideToggle() 实例
$(".flip").click(function(){
$(".panel").slideToggle();
});
（四）自定义动画
jQuery 函数创建自定义动画的语法：
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性：
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是："slow", "fast", "normal" 或毫秒。
实例
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
常见JQuery效果函数：
| 方法 | 描述 |
|---|---|
| animate() | 对被选元素应用“自定义”的动画 |
| clearQueue() | 对被选元素移除所有排队的函数（仍未运行的） |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 运行被选元素的下一个排队函数 |
| fadeIn() | 淡入被选元素至完全不透明 |
| fadeOut() | 淡出被选元素至完全不透明 |
| fadeTo() | 把被选元素减弱至给定的不透明度 |
| hide() | 隐藏被选的元素 |
| queue() | 显示被选元素的排队函数 |
| show() | 显示被选的元素 |
| slideDown() | 通过调整高度来滑动显示被选元素 |
| slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
| slideUp() | 通过调整高度来滑动隐藏被选元素 |
| stop() | 停止在被选元素上运行动画 |
| toggle() | 对被选元素进行隐藏和显示的切换 |