将FadeIn和FadeOut添加到弹出JQUERY

Question

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

有人可以告诉我如何在以下代码中添加淡入/淡出效果吗？

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