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;
}