How can I make a div fade in, when a specific function is called? The Div is a link, with image background

Question

Javascript:

var myIndex = 0;


setTimeout(updateFunction, 000)
setInterval(updateFunction, 17000)

function updateFunction(){
++ myIndex;
if (myIndex > 2) myIndex = 0;

switch(myIndex) {

case 0: showIt();
break;
case 1: showIt2();

case 1:
case 1:

break;
case 2: showIt3();
case 2: 
case 2:
break;

}

}

    function showIt() {
        document.getElementById("news1").style.visibility = "visible";

        document.getElementById("news3").style.visibility = "hidden";
     document.getElementById("news2").style.visibility = "hidden";
     $('#readmore1').animate({ "top":"-50px", "left":"546px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
        $('#readmore2').animate({ "top":"-35px", "left":"726px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
        $('#readmore3').animate({ "top":"-35px", "left":"939px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);







    }

    function showIt2() {
        document.getElementById("news1").style.visibility = "hidden";
            document.getElementById("news2").style.visibility = "visible";
            document.getElementById("news3").style.visibility = "hidden";
            document.getElementById("pic").style.visibility = "hidden";
            $('#readmore1').animate({ "top":"-35px", "left":"546px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
            $('#readmore2').animate({ "top":"-50px", "left":"726px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
            $('#readmore3').animate({ "top":"-35px", "left":"939px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);    

    }

    function showIt3() {
        document.getElementById("news1").style.visibility = "hidden";
            document.getElementById("news2").style.visibility = "hidden";
            document.getElementById("news3").style.visibility = "visible";
            document.getElementById("pic").style.visibility = "hidden";
            $('#readmore1').animate({ "top":"-35px", "left":"546px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
            $('#readmore2').animate({ "top":"-35px", "left":"726px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);
            $('#readmore3').animate({ "top":"-50px", "left":"939px", "margin-top: ":"-104px", "margin-left":"-152px"}, 500);

}

HTML:

<div id="news">News and Alerts
    <div id="readmore1"><a href="#" onclick="showIt()">WebDevelopment</a></div>
    <div id="readmore2"><a href="#" onclick="showIt2()">Mundus Note Project</a>
    </div>
    <div id="readmore3"><a href="#" onclick="showIt3()">GGP</a>
    </div>

</div>
<div id="news1">post 1</div>
<div id="news2">post 2</div>
<div id="news3">post 3</div>
<div id="pic"><a href="#">hey</a></div>

CSS:

#news1, #news2, #news3{
position: absolute;
width: 800px;
left: 00px;
top: 270px;
visibility: hidden;
padding: 30px;
font-size: 15px;
letter-spacing: 1px;
color: black; 
font-family: sans-serif;
border-top: solid;
border-bottom: solid;


}
#news{
position: relative;
left: 10px;
top: 275px;
font-family: sans-serif;
letter-spacing: 2px;
color: rgb(0,0,115);

}
#pic{
position: absolute;
width: 95px;
height: 95px;
display: block;
text-indent: -9999px;
left: 900px;
top: 180px;

}
#pic a{
background: url(../images/sphere4.png);
display: block;
width: 95px;
height: 95px;
visibility: hidden;

}
#readmore1{
position: absolute;
font-size: 17px;
top: -35px;
left: 394px;
height: 400px;  


}
#readmore1 a{
text-decoration: none;
color: white;
background: url(../images/borderback.png);
padding:10px;

}
#readmore2{
position: absolute;
font-size: 17px;
top: -35px;
left: 574px;

}
#readmore2 a{
text-decoration: none;
color: white;
background: url(../images/borderback.png);
padding:10px;

#readmore3{
position: absolute;
font-size: 17px;
top: -35px;
left: 787px;

}
#readmore3 a{
text-decoration: none;
color: white;
background: url(../images/borderback.png);
padding:10px;

}

Ok, where to begin with this one. I have looked for hours on how to solve this and I am stuck not being able to make a div fade in when function showIt() is called. 99% of the code works with the exception that I cannot get the div "#pic" to fade in when showIt() is called. I want to be able to do this for all the functions (showIt2 and showIt3) but I need to learn to do this first.

The majority of the code is simply for perspective of what I'm trying to do, I used

document.getElementById("pic").style.visibility = "visible";

and It was working fine, the problem is that it just appears instantly and doesn't fade. I need it to look smoother and I have been trying to use fadeIn() but it doesnt work. I tried adding the following code after the "readmore3" animate of function showIt() and it won't take it.

$('#pic').fadeIn();

I don't know if there is something wrong with a specific part of the code or if it is because the div I am using is a link with a background image. I want to make the image appear and then also be clickable and this is the only way I am able to do it that I know. I am trying to do a passive alert/news box for my home page and every article will also contain an image to go with it, I want to make the image come in smoothly and also clickable.

I'm srry I having trouble explaining this, any help would be really appreciated. Thank you for taking the time to look at my issue.

Answer 1

Have a look at this jsfiddle: http://jsfiddle.net/yNdFZ/

In the example I'm using jQuery.show(speed) and jQuery.fadeIn(time):

$(element).show('slow');
       --- or ---
var time = 5000;
$(element).fadeIn(time);