toggle( ) : 此方法接受两个函数作为参数，相互切换。如果没有任何参数，将默认在show( ) , hide( ) 间切换。与show( ) , hide( ) 一样，toggle( ) 方法也可以接受两个参数，制作成动画效果。
fadeIn( ) ，fadeOut( ) : 这两种动画效果类似渐渐的褪色，语法与show( ) ,hide( ) 完全相同。
fadeTo( ) : 前面讲的方法都 是从有到无或从有到无的变幻，只不过变幻的方式不同而已。fadeTo( duration, opacity, [callback])方法，能够让开发者自定义变幻目标的透明度。
slideUp( ) ，slideDown( ) : 语法与show( ) , hide( ) 相同，slideToggle( )为两者间的简易切换方法。
animate( ) : 自定义动画。有两种形式：一为animate(params, [duration], [easing], [callback]) 其中params为要变化到的css属性的列表，以及希望变化到的最终值。duration为可选项。easing为可选参数，通常供动画插件使用，用来控制变化过程的节奏，有linear 和 swing两个值。callback 为可选的回调函数，在动画完成后触发。params中的变量要遵循camel的命名规则，例如padding-left应该写成pddingLeft，且params只能是css中用数值表示的属性，例如width, top, opacity等，像backgroundColor 这样的属性不被animate( ) 支持。例：
$("button").click(function(){
$("#block").animate({
opacity:"0.5",
"80%",
height: "100%",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px"
}, 2000)
})
animate ( ) 另外一种形式：animate( params, options):其中params与形式一中完全相同，options为动画的可选参数列表，主要包括duration, easing, callback, queue等，其中前三者与形式一相同，queue为bool值，表示当有多个animate( )组成jQuery链时，当前animate( )与紧接着的下一个animate( )是按顺序执行（true）还是同时触发（false）。
例：第一个animate与第2个同时执行，然后再去执行第3个。
$("input:eq(0)").click(function() {
$("block").animate({"90%"},{queue:false,duration:1500})
.animate({fontSize: "24px"}, 1000)
.animate({borderRightWidth:"20px"},2000);
});
发现对这个参数不大明白，又找点东西哈
jQuery中的queue和dequeue是一组很有用的方法，他们对于一系列需要按次序运行的函数特别有用。特别animate动画，ajax，以及timeout等需要一定时间的函数
queue和dequeue的过程主要是：
1，用queue把函数加入队列（通常是函数数组）
2，用dequeue将函数数组中的第一个函数取出，并执行(用shift()方法取出并执行）
也就意味着当再次执行dequeue的时候，得到的是另一个函数了
同时也意味着，如果不执行dequeue，那么队列中的下一个函数永远不会执行
对于一个元素上执行animate方法加动画，jQuery内部也会将其加入名为 fx 的函数队列
而对于多个元素要依次执行动画，则必须我们手动设置队列进行了。
一个例子，要两个div依次向左移动，点击这里查看
div {
background: #aaa ;
18 px ;
height: 18 px ;
position: absolute ;
top: 10 px ;
}
< div id = " block1 " ></ div >
< div id = " block2 " ></ div >
如果只是轮流移动次数较少，可以使用animate的回调函数来做，一个动画放在另一个动画的回调里边
比如
$ ( " #block1 " ) . animate ({ left : " +=100 " } , function () {
$ ( " #block2 " ) . animate ({ left : " +=100 " } , function () {
$ ( " #block1 " ) . animate ({ left : " +=100 " } , function () {
$ ( " #block2 " ) . animate ({ left : " +=100 " } , function () {
$ ( " #block1 " ) . animate ({ left : " +=100 " } , function (){
alert ( " 动画结束 " ) ;
}) ;
}) ;
}) ;
}) ;
}) ;
但这种方法当动画较多的时候简直是残忍。
此时利用queue和dequeue则显得简单很多：
var FUNC = [
function () { $ ( " #block1 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
function () { $ ( " #block2 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
function () { $ ( " #block1 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
function () { $ ( " #block2 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
function () { $ ( " #block1 " ) . animate ({ left : " +=100 " } , aniCB ) ; } ,
function (){ alert ( " 动画结束 " )}
] ;
var aniCB = function () {
$ ( document ) . dequeue ( " myAnimation " ) ;
}
$ ( document ) . queue ( " myAnimation " , FUNC ) ;
aniCB () ;
1，我首先建议了一个函数数组，里边是一些列需要依次执行的动画
2，然后我定义了一个回调函数，用dequeue方法用来执行队列中的下一个函数
3，接着把这个函数数组放到document上的myAnimation的队列中（可以选择任何元素，我只是为了方便而把这个队列放在document上）
4，最后我开始执行队列中的第一个函数
这样做的好处在于函数数组是线性展开，增减起来非常方便。
而且，当不要要继续进行接下来动画的时候(比如用户点了某个按钮)，只需要清空那个队列即可。而要增加更多则只需要加入队列即可
//清空队列
$ ( document ) . queue ( " myAnimation " , []) ;
//加一个新的函数放在最后
$ ( document ) . queue ( " myAnimation " , function (){ alert ( " 动画真的结束了！ " )}) ;
以前发过一个wait插件，用于让动画之间可以暂停一段时间
http://shawphy.com/2008/07/enabling-settimout-within-chained-functions-in-jquery.html
可以看一下，他也就是利用了这个原理，默认在fx中插入一个timeout，放到队列中，直到timeout结束后才执行dequeue继续执行队列中的下一个函数。
这当然也可以用于ajax之类的方法，如果需要一系列ajax交互，每个ajax都希望在前一个结束之后开始，之前最原始的方法就是用回调函数，但这样太麻烦了。同样利用queue添加队列，每次ajax之后的回调中执行一次dequeue即可。
如果没有使用jQuey库，也可以自己写段简易代码来解决这个问题。见控制队列函数
本站采用创作共享 版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"shawphy.com ", 保留原始链接, 此外还必须标注原文标题和链接。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/cgeason/archive/2009/08/21/4470778.aspx