原生JS实现fadeIn淡入fadeOut淡出效果

豫迷糊

于 2021-02-07 16:09:56 发布

阅读量803

点赞数 1

分类专栏： html js 网站知识文章标签： html css javascript

本文链接：https://blog.csdn.net/sncdma/article/details/113742773

版权

本文详细讲解如何利用原生JavaScript实现元素的fadeIn淡入和fadeOut淡出效果，不依赖任何库。通过调整元素的透明度属性，配合定时器实现平滑的动画过渡。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>原生JS实现淡入淡出效果</title>
<style>
/*demo css*/
#demo div.box {float:left;width:31%;margin:0 1%}
#demo div.box h2{margin-bottom:10px}
#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}
#demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden}
</style>
<script>
window.onload = function(){
	//底层共用
    var iBase = {
        Id: function(name){
            return document.getElementById(name);
        },
		//设置元素透