Question

现在我有一个非常简单的onClick弹出功能，可根据ID在特定div上设置setVisibility：

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

和html：

<a onclick="setVisibility('popup1', 'block');">
<div id="popup1">Content<a onclick="setVisibility('popup1', 'none');"></div>

我想要做的是为此添加一个简单的淡入淡出（也许是淡出）。

我自己能够完成的就是在脚本中设置特定的标签..但我正在处理的项目将会有几十个ID特定的弹出窗口，所以你可以看到它会如何变得混乱。

如果有人可以帮助获得上面脚本的淡入淡出，我将不胜感激。谢谢！

Answer 1

使用.fadeIn()。

$("#popup1").fadeIn("slow");

更多信息： http://api.jquery.com/fadeIn/

Answer 2

如果你只想淡入/淡出元素，那么你不一定需要使用jQuery。您可以将以下fadeIn和fadeOut函数调用替换为问题中的setVisibility函数。

function setOpacity(id,value) {
    var obj = document.getElementById(id);
    obj.style.opacity = value;
    obj.style.filter = 'alpha(opacity=' + value*100 + ')';    // lte IE8
}

function fadeIn(id) {
    for (var i=0; i<1; i+=0.1) {
        setTimeout('setOpacity("'+id+'",'+i+')',(i*10)*100);
    }
}

function fadeOut(id) {
    for (var i=0; i<1; i+=0.1) {
        setTimeout('setOpacity("'+id+'",'+i+')',((1-i)*10)*100);
    }
}

如果您希望在不透明度达到0时完全隐藏元素（即setOpacity），则可能需要修改display:none函数。

然而，由于代码是相当突兀的，因此在HTML中内联分配了事件。如果JavaScript由于任何原因不可用，那么页面可能会中断，或者看起来混乱/混乱。通过在页面加载时分配行为/事件，这应该是 unobtrusive 。然后，您可以避免在初始事件调用中显式传递元素ID。

结合onClick popup和fadeIn

2 个答案: