jQuery学习（四）jQuery效果
四．JQuery效果
jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
4.1.jQuery 效果函数
| 方法 |
描述 |
| animate() |
对被选元素应用“自定义”的动画 |
| clearQueue() |
对被选元素移除所有排队的函数（仍未运行的） |
| delay() |
对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() |
运行被选元素的下一个排队函数 |
| fadeIn() |
逐渐改变被选元素的不透明度，从隐藏到可见 |
| fadeOut() |
逐渐改变被选元素的不透明度，从可见到隐藏 |
| fadeTo() |
把被选元素逐渐改变至给定的不透明度 |
| hide() |
隐藏被选的元素 |
| queue() |
显示被选元素的排队函数 |
| show() |
显示被选的元素 |
| slideDown() |
通过调整高度来滑动显示被选元素 |
| slideToggle() |
对被选元素进行滑动隐藏和滑动显示的切换 |
| slideUp() |
通过调整高度来滑动隐藏被选元素 |
| stop() |
停止在被选元素上运行动画 |
| toggle() |
对被选元素进行隐藏和显示的切换 |
（注：jQuery效果函数摘自www.3school.com.cn）
4.2常用实例
jQuery 效果
| 函数 |
描述 |
| $(selector).hide() |
隐藏被选元素 |
| $(selector).show() |
显示被选元素 |
| $(selector).toggle() |
切换（在隐藏与显示之间）被选元素 |
| $(selector).slideDown() |
向下滑动（显示）被选元素 |
| $(selector).slideUp() |
向上滑动（隐藏）被选元素 |
| $(selector).slideToggle() |
对被选元素切换向上滑动和向下滑动 |
| $(selector).fadeIn() |
淡入被选元素 |
| $(selector).fadeOut() |
淡出被选元素 |
| $(selector).fadeTo() |
把被选元素淡出为给定的不透明度 |
| $(selector).animate() |
对被选元素执行自定义动画 |
4.2.1通过 hide()和 show()两个函数，jQuery支持对 HTML元素的隐藏和显示
实例：
<html>
<head>
<script type="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide"type="button">隐藏</button>
<button id="show"type="button">显示</button>
</body>
</html>
hide() 和 show() 都可以设置两个可选参数：speed 和 callback。
语法：
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。
实例：
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<buttontype="button">隐藏</button>
<p>Thisis a paragraph with little content.</p>
<p>Thisis another small paragraph.</p>
</body>
</html>
4.2.2自定义动画
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<scripttype="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>
</head>
<body>
<p><ahref="#" id="start">Start Animation</a></p>
<divid="box"
style="background:#98bf21;height:100px;width:100px;position:relative">
</div>
</body>
</html>
（注：以上内容是通过http://www.w3school.com.cn学习，很多内容粘帖下来是为了方便学习）