将 FadeIn 和 FadeOut 添加到弹出 JQUERY答案

【问题标题】：Add FadeIn & FadeOut to a Popup JQUERY将 FadeIn 和 FadeOut 添加到弹出 JQUERY
【发布时间】：2018-04-01 19:47:58
【问题描述】：

基本上，我有一个弹出框，它会在点击功能时打开，除了淡入/淡出效果外，它工作得非常好。

谁能告诉我如何在下面的代码中添加淡入淡出效果？

function openPopUp() {
    document.getElementById("myOverlay").style.display = "block";

}

function closePopUp() {
    document.getElementById("myOverlay").style.display = "none";
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

既然你已经添加了jquery 标签，我认为jQuery 没问题。

function openPopUp() {
    $("#myOverlay").fadeIn(500); // "500" is not required. "400" is the default value
}

function closePopUp() {
    $("#myOverlay").fadeOut(500);  // "500" is not required. ""400 is the default value
}

更多信息：

【讨论】：

【解决方案2】：

jQuery 解决方案
使用 jquery 可以更轻松地做到这一点

function openPopUp() {
    $("#myOverlay").fadeIn("slow");
}

function closePopUp() {
    $("#myOverlay").fadeOut("slow");
}

有关 jquery FadeIn 和 Fadeout 的更多详细信息。

Javascript 解决方案
您需要为将更改 div 不透明度的函数设置回调

var done = true;
fading_div = document.getElementById('myOverlay');

function openPopUp() {
        if (done && fading_div.style.opacity !== '1') {
            done = false;
            for (var i = 1; i <= 100; i++) {
                setTimeout("function_opacity(" + i + ",'in')", i * 5);
            }
        }
}

function closePopUp() {
        if (done && fading_div.style.opacity !== '0') {
            done = false;
            for (var i = 100; i >= 1; i--) {
                setTimeout("function_opacity(" + i + ",'out')", (i - 100) * -1 * 5);
            }
        }
}

function function_opacity(opacity_value, fade_in_or_fade_out) 
{
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
    if (fade_in_or_fade_out == 'in' && opacity_value == 1) {
        fading_div.style.display = 'block';
    }
    if (fade_in_or_fade_out == 'in' && opacity_value == 100) {
        done = true;
    }
    if (fade_in_or_fade_out == 'out' && opacity_value == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

【讨论】：