2024年5月3日发(作者:)

jquery动画

Posted on 2011-11-06 14:11 许乐 阅读(1787) 评论(1) 编辑 收藏

基本动画

show()

显示隐藏的匹配元素。

这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不

会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这

个方法都将有效。

返回值:jQuery

示例

显示所有段落

HTML 代码:

Hello

jQuery 代码:

$("p").show()

show(speed,[callback])

以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。

返回值:jQuery

参数

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或

表示动画时长的毫秒数值(如:1000)

callback (Function) : (Optional) 在动画完成时执行的函数,每个元素执行一次。

示例

用缓慢的动画将隐藏的段落显示出来,历时600毫秒。

HTML 代码:

Hello

jQuery 代码:

$("p").show("slow");

用迅速的动画将隐藏的段落显示出来,历时200毫秒。并在之后执行反馈!

HTML 代码:

Hello

jQuery 代码:

$("p").show("fast",function(){

$(this).text("Animation Done!");

});

将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。

HTML 代码:

Hello

jQuery 代码:

$("p").show(4000,function(){

$(this).text("");

});

hide()

隐藏显示的元素

这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改

变任何东西。

返回值:jQuery

示例

隐藏所有段落

jQuery 代码:

$("p").hide()

hide(speed,[callback])

以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。

可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。

返回值:jQuery

参数

speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画

时长的毫秒数值(如:1000)

callback (FunctionFunction) : (Optional) 在动画完成时执行的函数,每个元素执行一次。

示例

用600毫秒的时间将段落缓慢的隐藏

jQuery 代码:

$("p").hide("slow");

用200毫秒将段落迅速隐藏,之后弹出一个对话框。

jQuery 代码:

$("p").hide("fast",function(){

alert("Animation Done.");

});

toggle()

切换元素的可见状态。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

返回值:jQuery

示例

切换所有段落的可见状态。

HTML 代码:

Hello

Hello Again

jQuery 代码:

$("p").toggle()

结果:

Hello

Hello Again

jQuery中的滑动

slideDown(speed,[callback])

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式显示出来。

返回值:jQuery

参数

speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画

时长的毫秒数值(如:1000)

callback (FunctionFunction) : (可选) 在动画完成时执行的函数

示例

用600毫秒缓慢的将段落滑下

jQuery 代码:

$("p").slideDown("slow");

用200毫秒快速将段落滑下,之后弹出一个对话框

none;width:200px;height:200px;background-color:Red;">Hello

jQuery 代码:

$("p").slideDown("fast",function(){

alert("Animation Done.");

});

slideUp(speed,[callback])

通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏起来。

返回值:jQuery

参数

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长

的毫秒数值(如:1000)

callback (Function) : (可选) 在动画完成时执行的函数

示例

用600毫秒缓慢的将段落滑上

jQuery 代码:

$("p").slideUp("slow");

用200毫秒快速将段落滑上,之后弹出一个对话框

jQuery 代码:

$("p").slideUp("fast",function(){

alert("Animation Done.");

});

slideToggle(speed,[callback])

通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

返回值:jQuery

参数

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画

时长的毫秒数值(如:1000)

callback (Function) : (可选) 在动画完成时执行的函数

示例

用600毫秒缓慢的将段落滑上或滑下

jQuery 代码:

$("p").slideToggle("slow");

用200毫秒快速将段落滑上或滑下,之后弹出一个对话框

jQuery 代码:

$("p").slideToggle("fast",function(){

alert("Animation Done.");

});

jQuery中淡入淡出效果

fadeIn(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

返回值:jQuery

参数

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画

时长的毫秒数值(如:1000)

callback (Function) : (Optional) (可选) 在动画完成时执行的函数

示例

用600毫秒缓慢的将段落淡入

jQuery 代码:

$("p").fadeIn("slow");

用200毫秒快速将段落淡入,之后弹出一个对话框

jQuery 代码:

$("p").fadeIn("fast",function(){

alert("Animation Done.");

});

fadeOut(speed,[callback])

通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

返回值:jQuery

参数

speed (String,Number) :三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的

毫秒数值(如:1000)

callback (Function) :(可选) 在动画完成时执行的函数

示例

用600毫秒缓慢的将段落淡出

jQuery 代码:

$("p").fadeOut("slow");

用200毫秒快速将段落淡出,之后弹出一个对话框

jQuery 代码:

$("p").fadeOut("fast",function(){

alert("Animation Done.");

});

fadeTo(speed,opacity,[callback])

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调

函数。

这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

返回值:jQuery

参数

speed (String,Number) : 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画

时长的毫秒数值(如:1000)

opacity (Number) : 要调整到的不透明度值(0到1之间的数字).

callback (Function) : (可选) 在动画完成时执行的函数

示例

用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度

jQuery 代码:

$("p").fadeTo("slow", 0.66);

用200毫秒快速将段落的透明度调整到0.25,大约1/4的可见度,之后弹出一个对话框

jQuery 代码:

$("p").fadeTo("fast", 0.25, function(){

alert("Animation Done.");

});

jQuery中的自定义动画

animate(params[,duration[,easing[,callback]]])

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的

样式属性(如“height”、“top”或“opacity”)。 注意:所有指定的属性必须用骆驼形式,比如用

marginLeft代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐

变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认

的动画形式。

在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性

值前面指定 "+=" 或 "-=" 来让元素做相对运动。

返回值

jQuery

参数

params (Options) : 必须的,jion对象一组包含作为动画属性和终值的样式属性和及其值的集合

duration (String,Number) : (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")

或表示动画时长的毫秒数值(如:1000)

callback (Function) : (可选) 在动画完成时执行的函数

示例1

点击按钮后div元素的几个不同属性一同变化

HTML 代码:

Hello!

jQuery 代码:

// 在一个动画中同时应用三种类型的效果

$("#go").click(function(){

$("#block").animate({

width: "90%",

height: "100%",

fontSize: "10em",

borderWidth: 10

}, 1000 );

});

让指定元素左右移动

HTML 代码:

style="display:

block;left:20px;top:20px;position:absolute;width:200px;height:200px;background-color:R

ed;border-style:solid;border-width:1px;border-color:Black;">Hello

jQuery 代码:

向右移动

$("#right").click(function(){

$(“p").animate({left: '+50px'}, "slow");

//要移动的元素是 绝对定位position:absolute; left增大相当于右移

});

$("#left").click(function(){

$(“p").animate({left: '-50px'}, "slow");

});

在600毫秒内切换段落的高度和透明度

jQuery 代码:

$("p").animate({

height: 'toggle', opacity: 'toggle' //不断切换opacity透明度 和height

}, "slow");

用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)

jQuery 代码:

$("p").animate({

left: 50, opacity: 'show'

}, 500);

animate(params,options)

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式

属性(如“height”、“top”或“opacity”)。 注意:所有指定的属性必须用骆驼形式,比如用marginLeft

代替margin-left.

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到

指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面

指定 "+=" 或 "-=" 来让元素做相对运动。

返回值:jQuery

参数

params (Options) : 一组包含作为动画属性和终值的样式属性和及其值的集合

options (Options) : 一组包含动画选项的值的集合。

选项

duration (String,Number) : (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or

"fast")或表示动画时长的毫秒数值(如:1000)

complete (Function) : 在动画完成时执行的函数

step (Callback) :

queue (Boolean) : (默认值: true) 设定为false将使此动画不进入动画队列 (jQuery 1.2中新增)

示例

第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完

毕后,边框的动画才开始。

第二个按钮按了之后就是一个传统的链式动画,即等前一个动画完成后,后一个动画才会开始.

HTML 代码:

Block1
Block2

jQuery 代码:

$("#go1").click(function(){

$("#block1").animate( { width: "90%"}, { queue: false, duration: 5000 } )

.animate( { fontSize: '10em' } , 1000 ) // queue: false说明绿的这俩动画同时进行

.animate( { borderWidth: 5 }, 1000); //等前两个执行完毕再执行

});

$("#go2").click(function(){

$("#block2").animate( { width: "90%"}, 1000 )

.animate( { fontSize: '10em' } , 1000 )

.animate( { borderWidth: 5 }, 1000);

});

用500毫秒将段落移到left为50的地方并且完全清晰显示出来(透明度为1)

jQuery 代码:

$("p").animate({

left: 50, opacity: 'show' // opacity: 'show' 由隐藏变为显示状态

}, { duration: 500 }); // duration: 500 在500毫秒内

stop()

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画,他们将被马上执行

返回值

jQuery

示例

点击Go之后开始动画,点Stop之后会在当前位置停下来

HTML 代码:

jQuery 代码:

// 开始动画

$("#go").click(function(){

$(".block").animate({left: '+200px'}, 5000);

});

// 当点击按钮后停止动画

$("#stop").click(function(){

$(".block").stop();

});

jquery中的动画效果

一、show()和hide()方法:

这两个方法是JQuery中最简单的两个动画效果。hide()是把元素的display样式设

为“none”,show()是把元素的display样式设为原来的样式(除了none之外的样

式)。JQuery在调用hide()时会记住元素原先的display属性,当调用show()的时

候会根据hide()方法记住的display属性来显示元素。

语法:

$("element").hide([speed][,callback])

$("element").show([speed][,callback])

speed:动画速度的参数,一般以毫秒为单位,也查以使用slow,fast等,如果不加

此参数的话,那不会出现动画过渡效果。

callback:动画执行结束后回调函数

以上两个动画会同时表现出三种效果:高度变化、宽度变化、透明度的变化。

示例:

$("element").show(1000);元素在一秒内动态显示出来。

$("element").hide(1000);元素在一秒内动态隐藏起来。

下面两个函数互为回调函数,一旦运行起来,就会把相应的元素以动画形式反复

显示、隐藏。

function hideDiv() {

$("#dd").hide(2000, function () { showDiv(); });

}

function showDiv() {

$("#dd").show(2000, function () { hideDiv(); });

}

二、fadeIn()方法和fadeOut()方法

这两个方法只改变元素的透明度,不改变大小。

语法:

$("element").fadeIn([speed][,callback])

$("element").fadeOut([speed][,callback])

speed:动画速度的参数,一般以毫秒为单位,也查以使用slow,fast等,如果不加

此参数的话,那也会出现默认动画过渡效果。

callback:动画执行结束后回调函数

示例:

$("element").fadeOut(1000);在一秒内,元素越来越透明,直到完全消失。

$("element").fadeIn(1000);与fadeOut()相反。

下面两个函数互为回调函数,一旦运行起来,就会把相应的元素以反复出现“褪

色”与“上色”的动画效果。

function hideDiv() {

$("#dd").fadeOut(2000, function () { showDiv(); });

}

function showDiv() {

$("#dd").fadeIn(2000, function () { hideDiv(); });

}

三、slideUp()方法和slideDown()方法

这两个方法只改变元素的高度,不改变宽度和透明度

语法:

$("element").slideUp([speed][,callback])

$("element").slideDown([speed][,callback])

speed:动画速度的参数,一般以毫秒为单位,也查以使用slow,fast等,如果不加

此参数的话,那也会出现默认动画过渡效果。

callback:动画执行结束后回调函数

示例:

$("element").slideUp(1000);在一秒内,元素高度逐渐变为0。

$("element").slideDown(1000);与fadeOut()相反。

下面两个函数互为回调函数,一旦运行起来,就会把相应的元素以反复出现“褪

色”与“上色”的动画效果。

function hideDiv() {

$("#dd").slideUp(2000, function () { showDiv(); });

}

function showDiv() {

$("#dd").slideDown(2000, function () { hideDiv(); });

}

四、自定义动画方法animate()

上面的三组方法能够实现简单的动画,但如果需要一些高级动画时就需要使用

animate()方法来实现。

语法:

$("element").animate(params,speed,callback);

params:包含样式{属性:值}的一组参数。如:

{backgroundColor:"red",color:"yellow",height:"160px"}

speed:动画显示的速度,以毫秒为单位

callback:回调函数

1.自定义简单动画

简单的一次性动画

$("dd").animate({left: "500px"}, 3000);

该动画的效果是在3秒内使dd元素右移500像素。需要事选把dd元素的position

设置为absolute或relative。

2.累加累减动画

在现有的状态下进行属性的累加变化,实现动态动画。

$("dd").animate({left: "+=500px"}, 3000);

它的作用是在当前位置向后再移500像素。当然也可以设为{left:"-=500px"}使动

画向右累加移动。

3.多重动画

a.同时执行多个动画,即同时改变元素的多个样式。

$("#dd").animate({ left: "800",width:"200",height:"400" }, 3000);

它的作用是dd元素在向右移动的同时把宽度加大为200像素,并把高度加大为

400像素。

b.按顺序执行多个动画,按一定的次序依次改变元素的多个样式。

$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width:

"300",left:"-=150" }, 3000);

它的作用是dd元素先右移800像素,再下移300像素,最后再同时拉宽左移

4.使用animate()的回调函数

如果在上面“多重动画”的基础上,让动画执行完成后,把元素的颜色变成红色

的话,有的人会这样写代码:

$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width:

"300",left:"-=150" }, 3000).css("background-color","red");

这种写法不正确,因为css()不会被加到动画过程中,而是立即被执行。我们可以

把改变颜色的代码放在回调函数中实现动画的排队效果。

$("#dd").animate({ left: "800" }, 3000).animate({ top: "300" }, 3000).animate({ width:

"300",left:"-=150" }, 3000,function(){changeColor(););

function changeColor() {

$("#dd").css("background-color","red");

}

在最后一个动画效果执行完成后回执行回调函数changeColor();

5.停止动画

停止当前执行的动画。

语法:

$("element").stop([clearQueue][,gotoEnd]);

clearQueue:bool,代表是否要清空未执行的动画队列

gotoEnd:bool,代表将正在执行的动画直接跳到末状态

如果我们做了一个下拉菜单,当鼠标移上去的时候就菜单下拉,当鼠标离开的时

候菜单上卷,下拉和上卷的动画时间都是3 秒种。

$("#dd").hover(

function () {

$("#dd").animate({ height: "500" }, 3000);

},

function () {

$("#dd").animate({ height: "100" }, 3000);

}

);

如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又

移出了菜单)就会产生“动画积累",当鼠标停止移动后,积累的动画还会持续

执行,直到动画序列执行完毕。这样导致动画效果与鼠标动作不一致。

要解决此问题只需要在移入移出动画之前加入stop(),结束当前动画进入下个动

画即可。

代码如下:

$("#dd").hover(

function () {

$("#dd").stop().animate({ height: "500" }, 3000);

},

function () {

$("#dd").stop().animate({ height: "100" }, 3000);

}

);

如果需到组合动画,在移入移出动画之前加入stop()来停止当前动画,如下

$("#dd").hover(

function () {

$("#dd").stop().animate({ height: "500" }, 3000).animate({ width: "500px" }, 3000);

},

function () {

$("#dd").stop().animate({ height: "100" }, 3000).animate({ width: "100px" },3000);

}

);

效果并不好,因为stop()只是停止了当前第一步的动画(即{height:"500"}),然

后又进入了第二步的动画(即[width:"500"})。

此时stop()的第一个参数就派上了用场,它会把下面没有执行的动画序列都清空

掉。

$("#dd").hover(

function () {

$("#dd").stop(true).animate({ height: "500" }, 3000).animate({ width: "500px" }, 3000);

},

function () {

$("#dd").stop(true).animate({ height: "100" }, 3000).animate({ width: "100px" },3000);

}

);

当然也可以使用第二个参数,让动画达到最后状态。如:stop(false,true)

判断元素是否正处于动画中

if(!$("element").is(":animated")){

//...

}

jQuery中的动画与效果

博客分类:

web前端

ASPjson

1.基本效果

匹配元素从左上角开始变浓变大或缩小到左上角变淡变小

①隐藏元素

除了可以设置匹配元素的display:none外,可以用以下函数

hide(speed,[callback]) 返回值:jQuery 参数-speed:三种预订速度之一的字符串

String(slow,normal,fast)或表示动画时长的毫秒数Number callback:在完成动画时执

行的函数,每个匹配元素执行一次

slow=600毫秒 normal=400毫秒 fast=200毫秒

以优雅的动画隐藏所有匹配的元素,并在隐藏完成后可选的触发一个回调函数。

②显示元素

show(speed,[callback]) 以优雅的动画显示所有匹配的元素,并在显示完成后可选

的触发一个回调函数。

③交替显示隐藏

toggle(speed,[callback]) 以优雅的动画切换匹配元素的可见状态,原来可见切换为

不可见,原来不可见切换为可见。

$(function(){

$("#hide1").click(function(){$("#1").hide(700)});

$("#show1").click(function(){$("#1").show(700)});

$("#toggle1").click(function(){$("#1").toggle(700)});

})

2.滑动效果

①向上收缩效果

slideUp(speed,[callback]) 通过高度的变化方式向上隐藏元素,并在隐藏完成后可选

的触发一个回调函数。

②向下展开效果

slideDown(speed,[callback]) 通过高度的变化方式向下显示元素,并在显示完成后可

选的触发一个回调函数。

③交替伸缩效果

slideToggle(speed,[callback]) 切换匹配元素的高度的方式来改变可见状态,原来可见

切换为不可见,原来不可见切换为可见。

$("#slideup1").click(function(){$("#1").slideUp(700)});

$("#slidedown2").click(function(){$("#1").slideDown(700)});

$("#slidetoggle").click(function(){$("#1").slideToggle(700)});

3.淡入淡出效果

通过控制匹配元素的不透明度来实现元素的显示与隐藏

①淡入效果

fadeIn(speed,[callback]) 通过不透明度的变化逐渐将匹配元素显现出来

$("#fadein").click(function(){$("#1").fadeIn("slow")});

②淡出效果

fadeOut(speed,[callback]) 通过不透明度的变化逐渐将匹配元素隐藏起来

③自定义不透明度

淡入或淡出的最终结果为自定义的透明度

fadeTo(speed,opacity,[callback]) opacity的值域是0~1之间

4.自定义动画效果

①自定义动画

animate(params,duration,[easing],[callback]) 返回值:jQuery 参数-params:一个包含类

似CSS样式设置的json对象,该对象决定了匹配元素要变成什么样子,

如:{height:"100%",width:"70%",fontSize:"4em",color:"white"}但这些样式属性的名字

与CSS的命名不同,它们使用骆驼命名法如fontSize 而在CSS中是

font-size duration:类似于前面几个函数的speed参数,表示匹配元素从开始变化到

最终结束变化的时长,其值的设置也一样String,Number easing:这个不太明白,要使

用的擦除效果的名称(需要插件支持),默认jQuery提供linear和

swing|String callback:和前面一样

这个函数可不像看上去那么简单,有几点需注意1.既然该函数是将匹配元素从原

来样子变化成函数中params参数中设置的样子,那么就必须有原来的样子,即

params中设置的样式属性必须在原来的样子中有设置过,不能本来没有设置

border,却在params中这样设置{borderStyle:"solid",borderWidth:"1px"} 2.就是前面

提到过的样式属性的骆驼命名法 3.有些样式属性animate是不支持的,即便你

在原来的样子里有设置过,比如background-color,在params中不能想当然的就设置

了backgroundColor样式属性。 /tag/jquery

left:-180px;">

用户名:

密码:

$(function(){

$("#3").mouseover(function(){$(this).stop().animate({left:"0px"})

}).mouseout(function(){$(this).stop().animate({left:"-180px"},3000)})

})

/s/blog_

以上实现了我们经常在网页上见的滑动框的效果,一开始框在浏览器左侧露出

20px,当鼠标滑到上面时框全部露出,鼠标滑出框时框又只露出20px, 我们看到

params中的样式属性都出现在了"原来的样子中-style属性中"。另外对于位置变化

的动画效果,要先给元素定位,如本处的position:absolute。这个例子中另外一个需

要注意的是stop()函数:停止所有在指定元素上正在运行的动画。

/jquery/effect_

$("#3").mouseover(function(){$(this).stop().animate({height:"toggle","width:"toggle"})})

如上样式属性值设成toggle的话表示在有和无之间进行切换

②jQuery动画队列

把针对某个匹配元素的多个动画操作放入一个队列中进行管理,这是默认设置,这

样队列中的动画会按先后顺序一个一个执行

如果不希望某个动画按顺序执行,而是希望它最先执行,可以如下设置animate()函

数,这是animate函数的有一种写法,它将除parmas以外的参数也用一个json对象

来表示

$("#id").animate(parmas,{queue:false,duration:1000}).animate(parmas,{queue:false,durati

on:1000})

以上俩动画会同时执行,总耗时1秒,而

$("#id").animate(parmas,{duration:1000}).animate(parmas,{duration:1000})

这俩动画会一个一个执行,总耗时2秒

以上所讲的所有动画函数均属于动画队列函数

/chougood/blog/item/

它们可以被队列控制函数所控制

/jquery/jquery_ref_

当然队列控制函数不仅仅只能控制动画队列函数,也能控制其他普通函数

如队列控制函数queue()函数

/2009/04/

/jqueryapi-queue-dequeue/

补:

delay(duration,[queueName]) /2010/11/