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