jQuery 動畫 - fadeTo()

在jQuery 動畫 - fadeIn 與 fadeOut這一篇裏面，討論了jQuery的淡出淡入效果，這一篇討論另外一個相關的 fadeTo() 方法。

如果想要進一步控制淡出淡入效果，可以調用此方法，除了特效轉換時間，還可以指定最終的轉換透明度，例如以下的設定：

$('#cimg').fadeTo('fast', opacity);

其中的第一個參數為整個效果的轉換時間長度（毫秒），第二個參數 opacity 為指定轉換的最終透明度。來看看以下兩張圖片：

    

畫面上顯示一張測試 fadeTo() 效果的圖片，點擊圖片會產生褪色的效果。以下為此範例的配置：

<img id="fadeImg"  src="images/j011.jpg"  />

針對此 img 標籤，撰寫以下的程式碼：

<script>

var opacity = 0.5;

$('#fadeImg').click(function () {

$(this).fadeTo('fast', opacity);

        });

</script>

其中於圖片 fadeImg 被點擊時，調用 fadeTo() ，將透明度調降至 0.5。而除了指定透明度，fadeTo() 另外亦接受回呼函式，如下式：

$('#fadeImg').fadeTo('fast', opacity, f);

其中第三個參數 f 為一回呼函式，當效果轉換完畢之後，這個函式會被執行。現在修改上述的範例，調整如下：

<script>

var opacity=1 ;

$('#fadeImg').click(function () {

  　$(this).fadeTo('fast', opacity, function () {

    　opacity -= 0.25;

      if (opacity < 0) opacity = 1;

      　});

      });

</script>

其中設定了第三個回呼參數，當透明度調整完成之後，會將變數 opacity 這個值減 0.25 ，然後判斷其是否小於 0，是的話則將其重設為 1 ，如此一來，使用者每一次點擊圖片時，透明度會下降 0.25 ，直到圖片完全消失，最後再回復為不透明狀態。