結合的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。