為自己的jQuery加上fadeToggle

jQuery fadeToggle

對於jQuery這個能讓你在你的網頁上進行簡單地處理事件、運行動畫效果的JavaScript庫,大家應該也十分熟悉。jQuery中有一個功能叫作.sildeToggle,這個功能讓你免去了輸入slideUp和sildeDown,從而精簡為一個。
可惜這個功能只適用在slide這個拉上拉下的效果,有沒有方法能為其他如fade淡出淡入加上這功能呢?現在由我來告訴你們,這方法的確存在。

這個功能便命名為.fadeToggle,這個功能以插件的方式加載在你的JavaScript檔案中。現在我來說說使用的過程。

你需要把這段代碼加載在你的JS檔案上。這樣,你便可以開始體驗一下.fadeToggle的使用了。

jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: ‘toggle’}, speed, easing, callback);};

以下為使用.fadeToggle的一個例子。

$("#div-one").click(function () {
// 當你點擊id為div-one的區塊時
$("#div-two").fadeToggle();
// id為div-two的區塊便會自動淡出,再點擊便淡入
return false;
});

最後提醒一下,如果在WordPress中要使用到jQuery的話,你可需要把"$"轉換成"jQuery"。因為"$"在WordPress中被佔用了,反正全部也換掉就對了。

Tags: .