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