基于原生javascript的淡入淡出函数封装（兼容IE）

- 日理万妓 2022-07-16 01:45 141阅读 0赞

在开发的过程中，我们要做淡入淡出效果的话，我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用，而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。

构建框架，基本没难度。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>透明度函数的封装</title>
    		<style type="text/css">
    			#box{
    				width: 200px;
    				height: 200px;
    				background: red;
    				margin: 50px auto;
    				opacity: .3;
    				filter: alpha(opacity:30);
    			}
    		</style>
    	</head>
    	<body>
    		<div id="box"></div>
    		<script src="toumingdu.js" type="text/javascript" charset="utf-8"></script>
    	</body>
    </html>

编写javascript部分，主要难点是changeOpacity()函数。

这个透明度函数的原理在大体上是跟运动函数相同的。总结为三步：

**1、获取当前值，根据目标值和当前值确定步长；**

**2、变化的过程，每次变化一个值（渐变动画和透明度其步长为不同的值，而匀速动画和透明度步长为定值）；**

**3、判断是否达到目标值，达到则清除定时器，结束。**

所以如果原理弄不清楚可以看一下另一篇文章[javascript匀速动画和缓冲动画][javascript]。

而在理解原理的情况下最大的难点应该是当前透明度的获取了（赋值比较简单）。获取透明度的值我们要考虑两种情况：

1、IE，虽然在在IE下不支持opacity属性，但是我们是可以通过box.currentStyle\['opacity'\]获取到它的值的，同时我们在写入的时候也会将给opacity的值写入css中，尽管IE不会因为opacity值的改变而变化透明度。

2、其他浏览器，其他浏览器是支持opacity属性，所以我们操作相对简单了许多，写入和读取都针对opacity即可。

接下来细讲在IE浏览器中的操作：

首先我们的css文件中有两个属性值在我们的操作中是有用的  opacity: .3;   filter: alpha(opacity:30);    显然我们很难获取filter属性中的opacity值（我不会！），但是如果我们使用currentStyle来获取opacity是比较简单的。所以我进行了测试发现，**尽管IE不支持这个属性，但是这个属性值的读取和写入时完全没问题的**，所以，问题就迎刃而解了！我们通过opacity可以读取当前透明度，然后通过filter改变透明度，同时，我们改变opacity的值（**不仅是为了兼容其他浏览器，同时我们写入以后IE浏览器中在下次移入的时候还可以获取当前的透明度，否则的话获取的是初始的opacity值**）。那么下面不就和动画那个问题一样了？

[javascript]: http://blog.csdn.net/sir1241/article/details/52554762