<script>
            window.onload = function(){
                var oMove = document.getElementById('myDiv');
                var oList = oMove.getElementsByTagName('a');
                for(var i=0; i<oList.length; i++){
                    oList[i].onmouseover = function(){
                        var _this = this.getElementsByTagName('i')[0];
                        startMode(_this,{top:-3,opacity:0},function(){
                            _this.style.opacity = 100;
                            startMode(_this,{top:3,opacity:100})
                        });
                        }
                    }
                }
                
        </script>

//框架

function startMode(obj,json,fn){
    clearInterval(obj.timer);
    
    obj.timer = setInterval(function(){
        var flag = true;
        for(var attr in json){
            var icur = 0;
            if(attr=='opacity'){
                icur = parseFloat(getStyle(obj,attr))*100;
            }else{
                icur = parseInt(getStyle(obj,attr));
            }
            
             var speed = (json[attr]-icur)/8;
             speed>0?Math.ceil(speed):Math.floor(speed);
            
            if(json[attr] != icur){
                flag = false;
            }
                if(attr == 'opacity'){
                    obj.style.opacity = (icur+speed)/100;
                    obj.style.filter = 'alpha(opacity'+(icur+speed)+')';
                }else{
                    obj.style[attr] = icur + speed+'px';
                }
            }
        
            if(flag){
                        clearInterval(obj.timer);
                        if(fn){
                            fn();
                        }
            }
        
    },30)
}


function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj,false)[attr];
    }
}