JavaScript之淡入淡出

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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);
    }
}

 

以上是关于JavaScript之淡入淡出的主要内容，如果未能解决你的问题，请参考以下文章

JavaScript实现淡入淡出

Javascript/jquery淡入淡出效果衰减

普通 javascript 触发 css 淡出，ajax 加载内容，使用 CSS 淡入

html想做个文字淡入淡出的效果

JQuery动画之淡入淡出动画

js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）