用原生js模拟jquery的淡入淡出fade效果
暨曾笑
代码测试：
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#div{
display: none;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="div"></div>
<button οnclick='show()'>test</button>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>function fadeIn(el,time){
if(el.style.opacity === ""){
el.style.opacity = 0;
}
if(el.style.display === "" || el.style.display === 'none'){
el.style.display = 'block';
}
var t = setInterval(function(){
if(el.style.opacity < 1){
el.style.opacity = parseFloat(el.style.opacity)+0.01;
}
else{
clearInterval(t);
}
},time/100);
}
function fadeOut(el,time){
if(el.style.opacity === ""){
el.style.opacity = 1;
}
if(el.style.display === "" || el.style.display === 'none'){
el.style.display = 'block';
}
var t = setInterval(function(){
if(el.style.opacity > 0){
el.style.opacity = parseFloat(el.style.opacity)-0.01;
}
else{
clearInterval(t);
el.style.display = 'none'
}
},time/100);
}
function show(){
var div=document.getElementById('div');
fadeIn(div,400);
window.setTimeout(fadeOut(div,800),1000);
}
类似资料：