6.4 在效果完成后执行一个操作

有时候,我们需要一旦一个效果完成就做些事情。例如,假设当特定照片淡入视线,我们希望出现一个标题。换句话说,标题必须在照片进入视线之后才弹出。通常,效果不会一个接着一个地执行,它们在调用的时候同时发生。因此,如果脚本有一行代码把照片淡入到视野,并且有另一行代码使得标题出现,那么,标题将会在照片还在淡入的时候出现。

要解决这个难题,我们可以给任何效果传递一个回调函数,这是只有在效果完成的时候才运行的一个函数。对于大多数效果来说,回调函数作为第二个参数传递(对于fadeTo()函数来说,是第三个参数)。

例如,假设页面上有一个ID为photo的图像,并且其下面的一个段落拥有一个ID为caption。要把照片淡入到视线中,然后再显示标题,可以像下面这样使用一个回调函数:


$('#photo').fadeIn(1000,function(){

$('#caption').fadeIn(1000);

});


当然,如果想要在页面载入的时候运行函数,应该希望先隐藏照片和标题,然后执行fadein效果:


$('#photo,#caption').hide();

$('#photo').fadeIn(1000,function(){

$('#caption').fadeIn(1000);

});


如果使用animate()函数,那么,回调函数出现在所有其他的参数之后,先是包含了要实现动画的CSS属性的对象直接量,然后是动画周期、缓动设置。然而,缓动设置是可选的,因此,你可以传递animate()函数、属性列表、持续时间和回调函数。例如,假设你不仅需要让照片淡入视线,而且想要将其宽度和高度从0增加到完整的大小(一种放大效果)。可以使用animate()函数来做到这点,然后,像下面这样显示标题:


1$('#photo').width(0).height(0).css('opacity',0);

2$('#caption').hide();

3$('#photo').animate(

4{

5 width:’200px',

6 height:’100px',

7 opacity:1

8},

9 1000,

10 function(){

11$('#caption').fadeIn(1000);

12}

13);//end animate


上面的第1行代码将照片的width、height和opacity设置为0(这将照片隐藏了起来,并且让其准备好进行动画)。第2行隐藏了标题。第3~13行是实际的动画函数,其中在第10~12行发生回调。这可能看上去有点奇怪,但是,遗憾的是,回调函数是在一个效果完成的时候执行动作(包括不同页面元素上的效果)的唯一方法。

注意:chapter06文件夹下的callback.html文件展示了上面的代码的应用。

当你想要在一行中实现几个元素的动画的时候,例如,让一个图像移动到屏幕中央,然后一个标题淡入视线,然后图像和标题都淡出视线,回调函数可能需要些技巧。为了做到这点,我们需要给回调函数传递一个回调函数,如下所示:


$('#photo').animate(

{

left:’+=400px',

},

1000,

function(){//first callback function

$('#caption').fadeIn(1000,

function(){//second callback function

$('#photo,#caption').fadeOut(1000);

}//end second callback

);//end fadeIn

}//end first callback function

);//end animate


注意:chapter06文件夹下的multiple-callbacks.html文件展示了这段代码的应用。

然而,如果想要给同一个页面元素添加额外的动画,则不需要使用回调函数。例如,假设想要将一幅图像移动到屏幕上,然后,让其淡出视线。在这种情况下,只要使用animate()函数移动图像,然后将其淡出视线就可以了。可以像下面这样来做到这点:


$('#photo').animate(

{

left:’+=400px',

},

1000

);//end animate

$('#photo').fadeOut(3000);


在这个例子中,尽管浏览器立即执行这段代码,但是jQuery会把每个效果放置到一个队列中,因此,第一个动画运行,然后,fadeOut()函数运行。使用jQuery函数串联技术(参见本书4.6.4节),可以将上面的代码重新编写为下面这样:


$('#photo').animate(

{

left:’+=400px',

},

1000).fadeOut(3000);


如果想要一幅照片淡入、淡出,然后再次淡入,可以像下面这样使用串联技术:


$('#photo').fadeIn(1000).fadeOut(2000).fadeIn(250);


注意:要了解有关效果队列如何工作的相关信息,请访问jQuery的Web站点:http://api.jquery.com/jQuer y.queue/。

在对一个元素上的效果排队的时候,另一个派得上用场的jQuery函数是delay()。在开始队列中的下一个效果之前,这个函数直接等待指定的毫秒数。例如,假设你想要将图像淡入视线,等待10秒,然后将其淡出视线。可以像下面这样使用delay()函数:


$('#photo').fadeIn(1000).delay(10000).fadeOut(250);