Combining onClick popup and fadeIn

Right now I have a very simple onClick popup function to setVisibility on specific divs based on ID:

<script language="JavaScript">
function setVisibility(id, visibility) 开发者_运维问答{
document.getElementById(id).style.display = visibility;
}
</script>

and the html:

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

What I want to do is add a simple fadeIn (and perhaps a fade out) to this.

All I can manage to accomplish by myself is setting specific tags in the script.. but the project I am working on is going to have dozens of ID specific popups, so you can see how that could get messy.

If anyone could help get a fadeIn to the script above, I would appreciate it. Thanks!

---

Use .fadeIn().

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

More info here: http://api.jquery.com/fadeIn/

---

If you just want to fade in / out an element then you don't necessarily need to use jQuery. You could substitute the following fadeIn and fadeOut function calls for the setVisibility function in the question.

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

You might want to modify the setOpacity function if you want the element to be completely hidden (ie. display:none) when opacity reaches 0.

However, as it stands the code is rather obtrusive, with events assigned inline in the HTML. If JavaScript is not available for any reason then the page might break, or look messy/confusing at best. This should be made unobtrusive by assigning the behaviours/events when the page loads. You can then probably avoid having to explicitly pass element IDs in the initial event call.