四．JQuery效果
jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
4.1.jQuery 效果函数
| 方法 | 描述 |
| 对被选元素应用“自定义”的动画 | |
| 对被选元素移除所有排队的函数（仍未运行的） | |
| delay() | 对被选元素的所有排队函数（仍未运行）设置延迟 |
| dequeue() | 运行被选元素的下一个排队函数 |
| 逐渐改变被选元素的不透明度，从隐藏到可见 | |
| 逐渐改变被选元素的不透明度，从可见到隐藏 | |
| 把被选元素逐渐改变至给定的不透明度 | |
| 隐藏被选的元素 | |
| queue() | 显示被选元素的排队函数 |
| 显示被选的元素 | |
| 通过调整高度来滑动显示被选元素 | |
| 对被选元素进行滑动隐藏和滑动显示的切换 | |
| 通过调整高度来滑动隐藏被选元素 | |
| 停止在被选元素上运行动画 | |
| 对被选元素进行隐藏和显示的切换 |
（注：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学习，很多内容粘帖下来是为了方便学习）
1106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
