JavaScript之淡入淡出

//正常输出
window.onload=function(){
    var div=document.getElementById('div');
    var timer=null;
    div.style.display='none';
    div.style.opacity='0';
    function fadein(elem, speed, opacity){
        elem.style.display = 'block';
        elem.style.opacity = val / 100;
        var val = 0;
        (function(){
            elem.style.opacity = val / 100;
            val += 10;
            console.log(val);
            if (val <= opacity+500) {
                setTimeout(arguments.callee, speed);
            }
        })();
    }
    document.getElementById('btn').onclick=function(){
        fadein(div,1000,100);
    }
}
//不正常，无法读取elem
window.onload=function(){
    var div=document.getElementById('div');
    var timer=null;
    div.style.display='none';
    div.style.opacity='0';
    function fadein(elem, speed, opacity){
        elem.style.display = 'block';
        elem.style.opacity = val / 100;
        var val = 0;
        elem.style.opacity = val / 100;
        val += 10;
        console.log(val);
        if (val <= opacity+500) {
            setTimeout(arguments.callee, speed);
        }
    }
    document.getElementById('btn').onclick=function(){
        fadein(div,1000,100);
    }
}
//不正常，一直输出10
window.onload=function(){
    var div=document.getElementById('div');
    var timer=null;
    div.style.display='none';
    div.style.opacity='0';
    function fadein(elem, speed, opacity){
        elem.style.display = 'block';
        elem.style.opacity = val / 100;
        var val = 0;
        elem.style.opacity = val / 100;
        val += 10;
        console.log(val);
        if (val <= opacity+500) {
            setTimeout(function(){
                fadein(elem, speed, opacity);
            },speed);
        }
    }
    document.getElementById('btn').onclick=function(){
        fadein(div,1000,100);
    }
}
//正常输出
window.onload=function(){
    var div=document.getElementById('div');
    var timer=null;
    div.style.display='none';
    div.style.opacity='0';
    var val = 0;
    function fadein(elem, speed, opacity){
        elem.style.display = 'block';
        elem.style.opacity = val / 100;
        console.log(val);
        if (val <= opacity+500) {
            val += 10;
            elem.style.opacity = val / 100;
            setTimeout(function(){
                fadein(elem, speed, opacity);
            },speed);
        }
    }
    document.getElementById('btn').onclick=function(){
        fadein(div,1000,100);
    }
}