How to fade in div's linked to icons?

I want to fade in the divs that pop up when you roll over an icon at my Tumblr theme I'm building, roseannebarr.tumblr.com. I don't know how to :(

P.S: If you get a "We'll be back shortly" try again in a few minutes, thats Tumblr being stupid :(

Here is how Tumblr works; Tumblr uses their own "tags" to create posts entered from a user's dashboard. You can post a link, photo, text, chat, video, or an audio. I only entered a photo post below. Outer is the icon you hover over (it also uses "block") and to开发者_开发技巧oltip is the actual content itself. The reason you view the source on my page but can't see this is because the tags ARE the content.

<div id="outer">
{block:Photo}
<img id="block" src="http://static.tumblr.com/ux4v5bf/vYSlebvt2/photo.png">
<div id="tooltip">

{LinkOpenTag}<center><img id="photo" src="{PhotoURL-500}" alt="{PhotoAlt}" /></center>    
{block:Caption}<div class="caption">{Caption}</div>{/block:Caption}

<img id="cover" src="http://static.tumblr.com/ux4v5bf/pMHledd2y/cover.png">
<img id="cover" src="http://static.tumblr.com/ux4v5bf/pMHledd2y/cover.png">
</div>
{/block:Photo}
</div>

I assume you are currently using jQuery's show() and hide() methods to work with the those divs.

Instead jQuery has a fadeIn() and a fadeOut() function which do exactly as they sound, you can find the docs for fadeIn here.

It takes a time in milliseconds as the first argument and an optional function to be called when the animation has finished as the second:

$('div#whatever').fadeIn(200, function() {
    console.log('the fade has finished when this function is called');
});

$('#myIconId').mouseover(function() {
    $('.mydivsClass').fadeIn(5000);
});

The one problem I see is that you have the same id on multiple elements on the page. W3C states one ID but multiple classes. You may have to do some refactoring to get the above to work. You need some way to match your icons up with an image, and typically that is what the id tags would do.