结合的onClick弹出和淡入

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

您可能需要修改setOpacity功能，如果你想要的元素被完全隐藏（即display:none），当不透明度达到0

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