JQUERY自定义动画函数
自定义动画函数包括了所有动画效果的高级应用和高级技巧。
.animate() 执行自定义的动画效果。 返回jQuery
.stop() 停止匹配元素当前正在执行的动画效果。 返回jQuery
jQuery.fx.off 取消全部动画效果 Boolean
.queue() 根据函数签名不同，可以获取指定队列的函数集合(返回Array),或者操作某一个队列(返回jQuery)
.dequeue() 执行匹配元素指定队列中的下一个函数
.clearQueue() 清除队列中的所有未执行函数 返回jQuey
.delay() 延时执行队列中的函数 返回jQuey
1.jQuery队列
对一个元素调用动画函数时，会发现动画是按照顺序执行的：
$("#holder").hide(1000),fadeIn();
也许在一个jQuery链上顺序执行不奇怪，但是可以同时运行两次语句：
$("#holder").hide(1000),fadeIn();
$("#holder").hide(1000),fadeIn();
这时将会发现这四个动画函数都是排队顺序执行的！
如果没有队列，hide()函数和fadeIn()函数并不会彼此等待，而是立刻全部执行完毕，但是jQuery中的动画效果会排队作用在元素上，“排队”效果就是通过jQuery中的队列实现的。
在jQuery内部，所有的动画函数都会排列在名为"fx"的队列中。jquery中提供了下列和队列有关的函数
.queue([queueName]) queueName：为队列的名字，默认是动画队列的名字"fx" 返回指定名字队列的函数数组。
.queue([queueName],newQueue) queueName:队列的名字，默认是动画队列的名字"fx" newQueue：一个函数数组，用于替换queueName队列的内容 此函数用来替换指定的队列内容
.queue([queueName],callback(next)) queueName:队列的名字，默认是动画队列的名字"fx" callback(next):要添加到队列中的函数 为指定队列添加一个函数
.dequeue([queueName]) queueName:队列的名字，默认是动画队列的名字"fx" 执行指定队列中的某一个函数
.delay(duration, [queueName]) duration:字符串或数字，表示延时的时间 queueName:队列的名字，默认是动画队列的名字 “fx” 让某一个队列的执行延迟
jQuery中的queue和dequeue是一组很有用的方法，它们对于一系列需要按次序运行的函数特别有用。特别是animate自定义动画,ajax,以及timeout等需要一定时间执行的函数
会动的图层
[console]
队列实际上是一个函数数组，要获取队列中函数数组，上例中使用的是.queue([queueName])函数，其中queueName参数如果省略，则表示获取默认的动画队列fx.
可以通过.queue([queueName],newQueue)设置一个队列：
var myQueue = [
function(){alert("1"); go(); $(this).dequeue();},
function(){}
];
其中newQueue参数是一个函数数组；
除了传递函数数组替换全部队列，还可以为队列添加一个函数。比如：
$("#myImg").slideup();
$("#myImg").queue(function(){alert('add a function');$(this).dequeue();});
上面的代码等同于：
$("#myImg").slideUp(function(){alert('add a function'); $(this).dequeue();});
特别需要注意，添加的函数一定要执行dequeue()函数。dequeue() 函数相当于将当前队列中的最前面的一个函数取出，并执行。
下面会首先执行slideUp()函数滑动隐藏，然后显示提示语句，再执行slideDown()函数
$("#myImg").slideUp();
$("#myImg").queue(function(){alert('add a function'); $(this).dequeue();});
$("#myImg").slideDown();
如果将dequeue()函数去掉：
$("#myImg").slideUp();
$("#myImg").queue(function(){alert('add a function'); });
$("#myImg").slideDown();
在显示提示文字"add a function"后，slideDown()函数不再执行在jQuery1.4版本后，当调用队列函数时，多了一个参数：
.queue([queueName],callback(next))
next参数是一个函数，调用next等同于手工调用dequeue()函数：
$("#myImg").slideUp();
$("#myImg").queue(function(next){alert('add a function'); next(); });
$("#myImg").slideDown();
在使用队列时，也常会使用delay()函数。delay()可以为某一个队列添加延时。
$("#myImg").slideUp().delay(1000).slideDown();
上面的例子中，当slideUp执行完毕后，会等待1秒钟，再执行slideDown()函数。
2.动画全局开关
jQuery提供了一个全局的属性
jQuery.fx.off
来关闭所有的动画效果。
3.停止元素动画
.stop([clearQueue], [jumpToEnd])
当stop()函数调用后，动画会停留在当时的状态上，并且动画的callback()回调函数也不会被调用
但是默认不带参数的stop()函数并不总是停止动画的运行。这是因为stop()函数会停止动画队列当前的函数，如果动画队列中还有函数的话，后面的函数会立刻执行
$("#myDiv").show("slow");
$("#myDiv").animate({left:'+=200'},2000);
$("#myDiv").animate({left:'-=200'},1500);
$("#myDiv").hide("slow");
在正常情况下，图层会运动到指定的位置，然后在返回。
但是如果在运动过程中，比如在
$("#myDiv").animate({left;'+=200'},2000);
过程中，运行：
$("#myDiv").stop();
会发现图层立刻向回移动，也就是开始执行：
$("#myDiv").animate({left:'-=200'},1500)
所以，如果希望stop()函数不仅仅停止当前动画，同时清楚队列时，可以传递clearQueue参数
$("#myDiv").stop(true,false);
4.自定义动画效果
animate()函数必须传递的参数只有一个：CSS属性集合。这个使用.css()函数时传递的集合是一样的，但是要求更严格。支持的CSS属性，必须要使用数字值。
所有指定的属性必须用骆驼形式，比如用marginLeft 代替margin-left
如果使用的是"hide" "show" "toogle"这样的字符串值，则会为该属性调用默认的动画形式：
另外属性值还可以是相对值。可以在数字前面添加"+="或"-="。"+="表示在当前值基础上增加，"-="表示在当前值基础上减少。
实现物体消散效果
$("#myDiv").animate({
"opacity": "hide",
"width" : $(window).width()-100,
"height": $(window).height()-100
},500)
Chainable Transition Effects