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;
}
复制代码

 

posted on   jack_Meng  阅读(331)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 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盘装系统 (新手篇)

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

支付宝打赏

主题色彩