Fade content on page load

Question

I have one page style site. My menu:

<ul id="creamenu" class="menuHolder">
  <li><a id="menu1" href="#/1">1</a></li>
  <li><a id="menu2" href="#/2">2</a></li>
  <li><a id="menu3" href="#/3">3</a></li>
  <li><a id="menu4" href="#/4">4</a></li>
  <li><a id="menu5" href="#/5">5</a></li>
</ul>

When click menu1, go to content on same page. My content structure:

<div id='menu1' class="fancyscroll-section" style="left:10800px;">
<div class="fancyscroll-content row blue">
/* Content items */         
</div>
</div>

I want when get content page, contents load via fade effect. Is it possible?

Answer 1

You can do it with fadeIn() You have same id for first menu item and the div you want to relate with it. You should have unique ids for html elements. If element is already visible hide it before you call fadeIn.

Live Demo

$('#menu1').click(function() {
    $('#menu1_content').hide().fadeIn(2000);
});​