Question

基本上，我有一个弹出框，可以在点击功能上打开，除了淡入/淡出效果外，它的效果非常好。

有人可以告诉我如何在下面的代码中添加fadein / fadeout效果吗？

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

}

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

Answer 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
}

更多信息：

Answer 2

JQuery解决方案
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;
    }
}

添加FadeIn＆amp; FadeOut到Popup JQUERY

2 个答案: