javascript 原生JS实现 fadeIn / fadeOut 方法
js 源码:
Object.prototype.fadeIn = function(time, callback) {
var el = this;
el.style.opacity = 0;
var st = setInterval(function() {
el.style.opacity = parseFloat(el.style.opacity) + 0.01;
if (el.style.opacity >= 1) {
clearInterval(st);
if (callback !== undefined) {
callback();
}
}
}, time);
return this;
}
Object.prototype.fadeOut = function(time, callback) {
var el = this;
el.style.opacity = 1;
var st = setInterval(function() {
el.style.opacity = parseFloat(el.style.opacity) - 0.01;
if (el.style.opacity <= 0) {
clearInterval(st);
if (callback !== undefined) {
callback();
}
}
}, time);
return this;
}
window.onload = function() {
var el = document.querySelector(".spinner");
el.fadeOut(50, function() {
el.fadeIn(50, function() {
console.log("finished");
});
});
}
示例:
Document.spinner {
width: 60px;
height: 60px;
position: relative;
margin: 100px auto;
}
.double-bounce-outer, .double-bounce-inner {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #67CF22;
opacity: 0.6;
position: absolute;
top: 0px;
left: 0px;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce-inner {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@keyframes bounce {
0%, 100% {
transform: scale(0.0);
} 50% {
transform: scale(1.0);
}
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: scale(0.0);
} 50% {
-webkit-transform: scale(1.0);
}
}
Object.prototype.fadeIn = function(time, callback) {
var el = this;
el.style.opacity = 0;
var st = setInterval(function() {
el.style.opacity = parseFloat(el.style.opacity) + 0.02;
if (el.style.opacity >= 1) {
clearInterval(st);
if (callback !== undefined) {
callback();
}
}
}, time);
return this;
}
Object.prototype.fadeOut = function(time, callback) {
var el = this;
el.style.opacity = 1;
var st = setInterval(function() {
el.style.opacity = parseFloat(el.style.opacity) - 0.02;
if (el.style.opacity <= 0) {
clearInterval(st);
if (callback !== undefined) {
callback();
}
}
}, time);
return this;
}
window.onload = function() {
var el = document.querySelector(".spinner");
el.fadeOut(20, function() {
el.fadeIn(20, function() {
console.log("finished");
});
});
}
复制粘贴保存打开见效果......
2024-04-07 16:29:48【出处】:https://blog.csdn.net/weixin_29912207/article/details/115020984
=======================================================================================
问题:
1)没有判断style是否为undefined。
2)每次调用函数都是由0--1的透明度
我改了一版,如下代码:
Object.prototype.fadeIn = function(time, callback) { var el = this; if (el.style == undefined) return; if(el.style.opacity.length == 0) el.style.opacity = 0; //console.log("ToTop======================opacity:"+el.style.opacity); var st = setInterval(function() { el.style.opacity = parseFloat(el.style.opacity) + 0.05; if (el.style.opacity >= 1) {clearInterval(st);if (callback !== undefined) callback();} },time); return this; } Object.prototype.fadeOut = function(time, callback) { var el = this; if (el.style == undefined) return; if(el.style.opacity.length == 0) el.style.opacity = 1; var st = setInterval(function() { el.style.opacity = parseFloat(el.style.opacity) - 0.05; if (el.style.opacity <= 0) {clearInterval(st);if (callback !== undefined) callback();} },time); return this; }
关注我】。(●'◡'●)
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的【因为,我的写作热情也离不开您的肯定与支持,感谢您的阅读,我是【Jack_孟】!
本文来自博客园,作者:jack_Meng,转载请注明原文链接:https://www.cnblogs.com/mq0036/p/18119348
【免责声明】本文来自源于网络,如涉及版权或侵权问题,请及时联系我们,我们将第一时间删除或更改!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2023-04-07 javascript把本地sql数据库表转换为对象
2023-04-07 关于人工智能技术应用场景的个人见解
2022-04-07 记事本乱码,如何修复记事本中的中文乱码
2020-04-07 一键构造你的博客园目录,下载到本地
2020-04-07 我的博客目录
2020-04-07 Log4Net日志分类和自动维护
2020-04-07 使用U盘装系统 (新手篇)