Databases
StackOverflow2013
Postsdbo
POHow can I make a div fade in, when a specific function is called? The Div is a link, with image background
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I make a div fade in, when a specific function is called? The Div is a link, with image background
    text
    copied!<p>Javascript:</p> <pre><code>var myIndex = 0; setTimeout(updateFunction, 000) setInterval(updateFunction, 17000) function updateFunction(){ ++ myIndex; if (myIndex &gt; 2) myIndex = 0; </code></pre> <p>switch(myIndex) {</p> <pre><code>case 0: showIt(); break; case 1: showIt2(); case 1: case 1: break; case 2: showIt3(); case 2: case 2: break; </code></pre> <p>}</p> <p>}</p> <pre><code> 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); </code></pre> <p>}</p> <p>HTML:</p> <pre><code>&lt;div id="news"&gt;News and Alerts &lt;div id="readmore1"&gt;&lt;a href="#" onclick="showIt()"&gt;WebDevelopment&lt;/a&gt;&lt;/div&gt; &lt;div id="readmore2"&gt;&lt;a href="#" onclick="showIt2()"&gt;Mundus Note Project&lt;/a&gt; &lt;/div&gt; &lt;div id="readmore3"&gt;&lt;a href="#" onclick="showIt3()"&gt;GGP&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="news1"&gt;post 1&lt;/div&gt; &lt;div id="news2"&gt;post 2&lt;/div&gt; &lt;div id="news3"&gt;post 3&lt;/div&gt; &lt;div id="pic"&gt;&lt;a href="#"&gt;hey&lt;/a&gt;&lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#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; } </code></pre> <p>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. </p> <p>The majority of the code is simply for perspective of what I'm trying to do, I used </p> <pre><code>document.getElementById("pic").style.visibility = "visible"; </code></pre> <p>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.</p> <pre><code>$('#pic').fadeIn(); </code></pre> <p>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. </p> <p>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. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload