在jQuery 動畫 - fadeIn 與 fadeOut這一篇裏面,討論了jQuery的淡出淡入效果,這一篇討論另外一個相關的 fadeTo() 方法。
如果想要進一步控制淡出淡入效果,可以調用此方法,除了特效轉換時間,還可以指定最終的轉換透明度,例如以下的設定:
其中的第一個參數為整個效果的轉換時間長度(毫秒),第二個參數 opacity 為指定轉換的最終透明度。來看看以下兩張圖片:

畫面上顯示一張測試 fadeTo() 效果的圖片,點擊圖片會產生褪色的效果。以下為此範例的配置:
針對此 img 標籤,撰寫以下的程式碼:
其中於圖片 fadeImg 被點擊時,調用 fadeTo() ,將透明度調降至 0.5。而除了指定透明度,fadeTo() 另外亦接受回呼函式,如下式:
其中第三個參數 f 為一回呼函式,當效果轉換完畢之後,這個函式會被執行。現在修改上述的範例,調整如下:
其中設定了第三個回呼參數,當透明度調整完成之後,會將變數 opacity 這個值減 0.25 ,然後判斷其是否小於 0,是的話則將其重設為 1 ,如此一來,使用者每一次點擊圖片時,透明度會下降 0.25 ,直到圖片完全消失,最後再回復為不透明狀態。
如果想要進一步控制淡出淡入效果,可以調用此方法,除了特效轉換時間,還可以指定最終的轉換透明度,例如以下的設定:
$('#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 ,直到圖片完全消失,最後再回復為不透明狀態。
沒有留言:
張貼留言