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 ,直到圖片完全消失,最後再回復為不透明狀態。

沒有留言: