Web编程前端之6：如何使jQuery动画效果与程序顺序执行

在利用jQuery框架去处理一些简单的动画时，可能会遇到一些小问题

例如：

$("#pic").attr("src","0.jpg");

$("#pic").fadeOut("slow");

$("#pic").attr("src","1.jpg");

$("#pic").fadeIn("slow");

我们希望得到的结果是：

1    #pic  载入 0.jpg;

2    #pic  淡出;

3    #pic  载入 1.jpg;

4    #pic  淡入;

实现一个简单的图片切换，但是实际上运行的结果是

1.jpg 进行了 fadeOut,fadeIn

原因是  $("#pic").attr("src","1.jpg"); 是一个瞬间完成的动作

而fadeOut,fadeIn是持续的动作。我们看到 fadeOut动作的时候，实际上

程序已经执行完了，#pic已经替换成 1.jpg，所以会是 1.jpg连续执行了

fadeOut,fadeIn。

 

如何解决这个问题？其实方法也很简单,只需要把上述程序改为：

$("#pic").attr("src","0.jpg");

$("#pic").fadeOut("slow",function(){

      $("#pic").attr("src","1.jpg");

}).fadeIn("slow");

利用 fadeOut的 callback函数，在fadeOut执行后

替换 1.jpg，然后再执行 fadeIn()就可以了。

 

通过这个方法我们可以解决类似的一些动画之间程序顺序执行问题。