一個(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)文章
TypeScript入門(mén)之利用裝飾器擴(kuò)展代碼能力
在?TypeScript?中，裝飾器是一種特殊的聲明，可以讓你的代碼更有趣、更靈活，下面小編就來(lái)帶大家學(xué)習(xí)一下TypeScript中裝飾器的具體使用吧2023-06-06
我們經(jīng)常需要在新窗口彈出頁(yè)面并需要居中顯示2008-01-01
JS實(shí)現(xiàn)仿QQ效果的三級(jí)豎向菜單
這篇文章主要介紹了JS實(shí)現(xiàn)仿QQ效果的三級(jí)豎向菜單,以實(shí)例形式分析了JavaScript遍歷頁(yè)面元素及動(dòng)態(tài)改變頁(yè)面css樣式的技巧,需要的朋友可以參考下2015-09-09
由于前端開(kāi)發(fā)的火熱和一些IT巨頭公司 對(duì) web前端開(kāi)發(fā)人員的需求旺盛，讓越來(lái)越多的人轉(zhuǎn)入前端。今天就為大家分享了一份Web前端開(kāi)發(fā)書(shū)單，希望大家喜歡2017-10-10
Javascript 獲取滾動(dòng)條位置等信息的函數(shù)
有時(shí)為了準(zhǔn)確定位一個(gè)元素，我們需要獲取滾動(dòng)條的位置，這種需求經(jīng)常出現(xiàn)在 tooltip 和 拖放等應(yīng)用中，其實(shí)這個(gè)技術(shù)很簡(jiǎn)單，關(guān)鍵是要考慮瀏覽器的兼容性，本文就是介紹這一問(wèn)題的解決方法。2009-09-09
這篇文章主要介紹了使用 JavaScript 制作頁(yè)面效果,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了微信小程序和百度的語(yǔ)音識(shí)別接口詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
今天為大家介紹的是JavaScript中的style.display屬性操作實(shí)現(xiàn)代碼與參數(shù)介紹2013-03-03
動(dòng)態(tài)加載js、css的實(shí)例代碼
這篇文章主要介紹了動(dòng)態(tài)加載js、css的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-05-05
JavaScript toDataURL圖片轉(zhuǎn)換問(wèn)題解讀
這篇文章主要介紹了JavaScript toDataURL圖片轉(zhuǎn)換問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06