jQuery成效（二）
jQuery效果
10、fadeToggle([speed,[easing],[fn]])
返回值:jQuery
概述：通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数：
speed[,fn]：Number/String,Function ：
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn] ：Number/String,String,Function ：
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
示例1：
描述：用600毫秒缓慢的将段落淡入
jQuery代码：$("p").fadeToggle("slow","linear");
示例2：
描述：用200毫秒快速将段落淡入，之后弹出一个对话框
jQuery代码：
$("p").fadeToggle("fast",function(){
alert("Animation Done.");
});
11、animate(params,[speed],[easing],[fn])
返回值：返回值:jQuery
概述：用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。
jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
参数：
params,[speed],[easing],[fn] ：Options,Number/String,String,Function ：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
params,options ：String,String ：
params::一组包含作为动画属性和终值的样式属性和及其值的集合
options:动画的额外选项。如：speed - 设置动画的速度,easing - 规定要使用的 easing 函数,callback - 规定动画完成之后要执行的函数,step - 规定动画的每一步完成之后要执行的函数,queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始,specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
示例1：
描述：点击按钮后div元素的几个不同属性一同变化
HTML代码：
<button id="go"> Run</button>
<div id="block">Hello!</div>
jQuery代码：
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
示例2：
描述：让指定元素左右移动
HTML代码：
<button id="left">?</button> <button id="right">?</button>
<div class="block"></div>
jQuery 代码:
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
示例3：
描述：在600毫秒内切换段落的高度和透明度
jQuery代码：
$("p").animate({
height: 'toggle', opacity: 'toggle'
}, "slow");
示例4：
描述：用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
jQuery代码：
$("p").animate({
left: 50, opacity: 'show'
}, 500);
示例5：
描述：一个使用“easein”函数提供不同动画样式的例子。只有使用了插件来提供这个“easein”函数，这个参数才起作用。
jQuery代码：
$("p").animate({
opacity: 'show'
}, "slow", "easein");
12、stop([clearQueue],[jumpToEnd])
返回值:jQuery
概述：停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
参数：
[clearQueue],[gotoEnd] ：Boolean,Boolean ：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
[queue],[clearQueue],[jumpToEnd] ：Boolean ：
queue:用来停止动画的队列名称
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
示例1：
描述：停止当前正在运行的动画：
jQuery代码：
$("#stop").click(function(){
$("#box").stop();
});
示例2：
描述：点击Go之后开始动画,点Stop之后会在当前位置停下来
HTML代码：
<button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div><button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div>
jQuery代码：
// 开始动画
$("#go").click(function(){
$(".block").animate({left: '+200px'}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function(){
$(".block").stop();
});
13、delay(duration,[queueName])
返回值:jQuery
概述：设置一个延时来推迟执行队列中之后的项目。
jQuery 1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行，也可以用于自定义队列。
参数：
duration,[queueName] ：Integer,String ：
duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。
示例1：
描述：在.slideUp() 和 .fadeIn()之间延时800毫秒。
HTML代码：
<div id="foo /">
jQuery代码：
$('#foo').slideUp(300).delay(800).fadeIn(400);
14、jQuery.fx.off
返回值:Boolean
概述：关闭页面上所有的动画。
把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：
* 你在配置比较低的电脑上使用jQuery。
* 你的一些用户由于动画效果而遇到了 可访问性问题
当把这个属性设成false之后，可以重新开启所有动画。
示例1：
描述：执行一个禁用的动画
jQuery代码：
jQuery.fx.off = true;
$("input").click(function(){
$("div").toggle("slow");
});
15、jQuery.fx.interval
返回值:Number
概述：设置动画的显示帧速。
示例：
描述: 帧速设置为100ms
jQuery代码：
<!DOCTYPE html>
<html>
<head>
<style>
div { width:50px; height:30px; margin:5px; float:left;
background:green; }
</style>
<script src="http://code.jquery.com/jquery-1.5.2.js"></script>
</head>
<body>
<p><input type="button" value="Run"/></p>
<div></div>
<script>
jQuery.fx.interval = 100;
$("input").click(function(){
$("div").toggle( 3000 );
});
</script>
</body>
</html>