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()就可以了。

 

通過這個方法我們可以解決類似的一些動畫之間程式順序執行問題。