结合onClick弹出窗口和fadeIn

问题描述

| 现在，我有一个非常简单的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>

我想做的是为此添加一个简单的fadeIn（也许是淡出）。 我自己能做的就是在脚本中设置特定的标签。.但是我正在从事的项目将有数十个特定于ID的弹出窗口，因此您可以看到它如何变得凌乱。 如果有人可以帮助淡入淡出上面的脚本，我将不胜感激。谢谢！     

解决方法

        使用

.fadeIn()

。

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

更多信息在这里： http://api.jquery.com/fadeIn/     ,        如果您只想淡入/淡出某个元素，则不一定需要使用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+\'\",((1-i)*10)*100);
    }
}

如果希望在不透明度达到0时完全隐藏元素（即

display:none

），则可能需要修改

setOpacity

函数。 但是，就目前情况而言，该代码相当麻烦，在HTML中内联分配了事件。如果由于任何原因无法使用JavaScript，则该页面可能会破裂，或看起来看起来很混乱/混乱。通过在页面加载时分配行为/事件，应该使这一点不引人注目。然后，您可以避免在初始事件调用中显式传递元素ID。