java fadein_原生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");
});
});
}
复制粘贴保存打开见效果......
java fadein_原生JS实现 fadeIn / fadeOut 方法相关推荐
- php object keys_原生js中Object.keys方法详解
实际开发中,有时需要知道对象的所有属性,原生js提供了一个方法Object.keys(). Object.keys(obj)返回的是一个数组,该数组的所有元素都是字符串.这些元素是来自于给定的obj可 ...
- 原生js实现fadein 和 fadeout淡入淡出效果
用法: $("button").click(function(){ $("p").fadeOut(); }); fadeOut() 方法逐渐改变被选元素的不透明 ...
- 原生js替换jQuery各种方法-中文版
原文https://github.com/nefe/You-D... You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Ev ...
- 扫雷html5简单初级,纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
- html js 遍历数组,分享几种原生JS数组遍历的方法和应用
数组遍历,对于前后端开发人员,是必须掌握的方法,那么数组遍历有哪些方法呢? OK,今天就分享几种原生JS方法,从原生开始学习,有助于大家应用到各种框架[小程序.三大框架等]中去,毕竟原生才是基本.一共 ...
- 纯原生JS用面向对象class方法实现简易扫雷小游戏
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏:布局为10*10的网格,随机生成10-20个雷. 左键点击扫雷.右键标记该地方有雷.该demo下载下来复制到html文件中直接可 ...
- 原生JS、jQuery 遍历方法总结
一.原生JS: forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当 ...
- 原生JS添加节点的方法
一 . 原理 insertAdjacentHTML() 原生js添加节点 二.代码 <!DOCTYPE html> <html><head><meta cha ...
- 原生js实现fadein 和 fadeout
js里面设置DOM节点透明度的函数属性:filter= "alpha(opacity=" + value+ ")"(兼容ie)和opacity=value/10 ...
- 百度地图测距 java_【java】改写js百度地图测距方法
百度地图测距js代码: var EARTHRADIUS = 6370996.81; /** * 将度转化为弧度 * @param {degree} Number 度 * @returns {Numbe ...
最新文章
- 出租房的网络环境研究
- MySQL 的 bug 必须修复吗？
- PHP调用新浪API 生成短链接
- 利用Docker一键部署若依前后端分离项目详细教程
- linux启动本地远程服务,如何使用SSH在本地控制远程服务器执行命令
- ともだちいじょう、こいびとみまん
- lzg_ad:EWF RAM Reg模式原理介绍
- C# GridView中DataFormatString属性的取值
- php后台管理员登录密码错误,织梦后台登陆不上提示验证码不正确1.密码明明正确的，却无法登陆后台管理...
- Python爬虫（二）——urllib库，Post与Get数据传送区别，设置Headers，urlopen方法，简单爬虫
- php阴历阳历互转类(1900~2100年)
- ubuntu20.04 重启黑屏 仅有左上角白色横杠闪烁
- 微创脑科学通过上市聆讯：年营收3.8亿 年内盈利降47%
- 亚马逊、沃尔玛、速卖通、Temu、OZON自养号测评和真人测评两者如何选择？
- EntityFramworkCore 配置种子数据(seeding data)
- 阿里云云安全 ACP（二）云盾的网络级防护
- Android中的hook框架：epic简介
- SpringBoot配置文件的修改
- Linux系统磁盘与分区管理
- Matlab与Python高级用法【专栏总结】