一個簡單的js漸顯(fadeIn)漸隱(fadeOut)類
更新時間：2010年06月19日 17:20:30 作者：
最近發(fā)現(xiàn)項目用的表單驗證不好使，干脆一邊參考人家的一邊自己寫了一個。在驗證有錯誤返回提示信息用到漸顯(fadeIn)漸隱(fadeOut)過渡(因為瀏覽器的效率實在太高了，一下就蹦了出來~~)；
要兼容IE(element.style.filter = 'alpha(opacity=value)')和非IE(element.style.opacity=value)就可以了。
另，還要注意，非IEopaciy的值是0~1之間，IE是1-100。
/**
* @projectDescription 動畫(漸顯、漸隱)類
* /**
* @projectDescription KINGKIT UI
* @date 2010-6-1
* @author Kit.Liao
* @copyright kingkit.com.cn
* @version 0.9.0
* @感謝：http://www.cnblogs.com/rubylouvre/archive/2009/09/16/1566699.html
* 使用示例：漸顯：KUI.Animation.fadeIn(el)；漸隱：KUI.Animation.fadeOut(el)
*/
KUI.Animation = {
fadeIn: function(id){
this.fade(id, true);
},
fadeOut: function(id){
this.fade(id, false);
},
fade: function(id, flag){
var target = KUI.get(id);
target.alpha = flag?1:100;
target.style.opacity = (target.alpha / 100);
target.style.filter = 'alpha(opacity=' + target.alpha + ')';
var value = target.alpha;
(function(){
target.style.opacity = (value / 100);
target.style.filter = 'alpha(opacity=' + value + ')';
if (flag) {
value++;
if (value <= 100) {
setTimeout(arguments.callee, 15);//繼續(xù)調(diào)用本身
}
}
else {
value--;
if (value >= 0) {
setTimeout(arguments.callee, 15);//繼續(xù)調(diào)用本身
}
}
})();
}
}
打包下載
另，還要注意，非IEopaciy的值是0~1之間，IE是1-100。
下面，貼代碼：
復(fù)制代碼 代碼如下:
/**
* @projectDescription 動畫(漸顯、漸隱)類
* /**
* @projectDescription KINGKIT UI
* @date 2010-6-1
* @author Kit.Liao
* @copyright kingkit.com.cn
* @version 0.9.0
* @感謝：http://www.cnblogs.com/rubylouvre/archive/2009/09/16/1566699.html
* 使用示例：漸顯：KUI.Animation.fadeIn(el)；漸隱：KUI.Animation.fadeOut(el)
*/
KUI.Animation = {
fadeIn: function(id){
this.fade(id, true);
},
fadeOut: function(id){
this.fade(id, false);
},
fade: function(id, flag){
var target = KUI.get(id);
target.alpha = flag?1:100;
target.style.opacity = (target.alpha / 100);
target.style.filter = 'alpha(opacity=' + target.alpha + ')';
var value = target.alpha;
(function(){
target.style.opacity = (value / 100);
target.style.filter = 'alpha(opacity=' + value + ')';
if (flag) {
value++;
if (value <= 100) {
setTimeout(arguments.callee, 15);//繼續(xù)調(diào)用本身
}
}
else {
value--;
if (value >= 0) {
setTimeout(arguments.callee, 15);//繼續(xù)調(diào)用本身
}
}
})();
}
}
打包下載
相關(guān)文章
這篇文章主要介紹了JS實現(xiàn)自動切換文字的導(dǎo)航效果代碼,涉及javascript動態(tài)切換頁面樣式的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JavaScript作為一門解釋執(zhí)行的腳本語言,其變量作用域與傳統(tǒng)編譯型語言有著明顯的區(qū)別,本文將詳細(xì)介紹JavaScript中變量的作用域規(guī)則,以及利用閉包實現(xiàn)的常見作用域應(yīng)用場景,幫助讀者進(jìn)一步掌握J(rèn)avaScript編程,感興趣的朋友跟隨小編一起看看吧2024-01-01
javascript中replace()在javascript中，String的函數(shù)replace()簡直太讓人喜愛了。它靈活而強(qiáng)大的字符替換處理能力，讓我不禁想向大家介紹它。2008-11-11
這篇文章主要介紹了微信打開網(wǎng)址添加在瀏覽器中打開提示的辦法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
javascript的tab切換原理與效果實現(xiàn)方法
這篇文章主要介紹了javascript的tab切換原理與效果實現(xiàn)方法,實例分析了簡單的tab切換實現(xiàn)技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
javascript實現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法
這篇文章主要介紹了javascript實現(xiàn)數(shù)組內(nèi)值索引隨機(jī)化及創(chuàng)建隨機(jī)數(shù)組的方法,涉及javascript數(shù)組索引及隨機(jī)數(shù)的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
這篇文章主要給大家介紹了關(guān)于如何解決前端調(diào)用后端接口時的超時問題,還詳細(xì)介紹了在Vue項目中配置axios的全局超時時間、使用遞歸和Promise.race()處理異步請求超時的最佳實踐,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了js實現(xiàn)正則匹配中文標(biāo)點符號的方法,涉及JavaScript正則匹配與判定的簡單使用技巧,需要的朋友可以參考下2015-12-12
javascript 通用簡單的table選項卡實現(xiàn)
鑒于UI妹妹每次交付過來的選項卡都夾帶了多多少少的js，而且每遇到選項卡就加一點js，造成垃圾低劣代碼逐漸堆積過多了，一直想做一個通用簡潔的選項卡庫。2010-05-05
這篇文章主要介紹了小程序接口的promise化的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12