透明度动画

实现思路：

每次均匀改变opacity值（ie的filter值），达到改变透明度的效果

效果

实现步骤：

对元素绑定鼠标移入移出事件

window.onload = function(){
    var container=document.getElementById('container');
    container.onmouseover = function(){
        moveStart(10,100);
    };
    container.onmouseout = function(){
        moveStart(-10,30);
    }
};

编写moveStart()函数

1. 对于ie和Firefox等浏览器不同处理
   在ie浏览器中透明度的设置：filter: alpha(opacity:50);

在其他浏览器中:opacity: 0.5;

1. 并没有container.offseAlpha属性
   在后续章节里将会提到用js获取属性的方法，在此处我们用var alpha代替
2. 对于clearInterval(timer);代码段的解释
   可将moveStart中的第一个clearInterval(timer);删除，将鼠标快速移入移出元素，你会发现元素会出现闪烁。
   这是因为在进行移入移出操作不停调用moveStart，在未达到clearInterval的条件时就已经开始了下一个函数，而上一个定时器并未关闭，透明度增加和减少交替进行，就形成了闪烁的情况。

代码内容

var timer=null;
var alpha = 50;
function moveStart(oSpeed,oTarget){
    clearInterval(timer);
    timer=setInterval(function(){
        if(oTarget === alpha){
            clearInterval(timer);
        }
        else{
            alpha += oSpeed;
            container.style.filter = 'alpha(opacity:'+alpha+');'
            container.style.opacity = alpha/100.0;
        }
    },30);
}