jQuery Navigation fade,hide,show,bounce and timing

Question

Here goes a really simple question! I want to make a navigation menu and content with jQuery.

Here is my navigation links :

<div id="menu" class="menuBg">
        <ul>
          <li><a class="btn1" href="#">How To?</a></li>
          <li><a class="btn2" href="#">Prizes?</a></li>
          <li><a class="btn3" href="#">Rules</a></li>
          <li><a class="btn4" href="#">Score</a></li>
        </ul>
</div>

Content :

<div id="content">

<div id="MainPage"><!-- content goes here --></div>
<div id="HowTo"><!-- content goes here --></div>
<div id="Prizes"><!-- content goes here --></div>
<div id="Rules"><!-- content goes here --></div>
<div id="Score"><!-- content goes here --></div>

</div>

Sample Navigation Code (includes first links code) :

$(document).ready(function() {

        $('#baslaBtn').on('click', function(){

            $('#HowTo').hide();
            $('#Prizes').hide();
            $('#Rules').hide();
            $('#Score').hide();

             $("#MainPage").fadeOut(500,"linear", function() {
                    $("#soru1").slideToggle(function() {
                                $("#soru1").effect("fadeIn",2000);
                    }).show(2000);
             });

            $('#MainPage').hide(1000);

         });
 });

...and i have 5 more on('click') function to navigate my menu to my contents. The problem is every time all of these contents loading without any effect. I want to load my content when load process is finished. The other problem is i'm putting hide() in every function to hide other objects.

Is there any way to make a function without a repeated code like :

        $('#HowTo').hide();
        $('#Prizes').hide();
        $('#Rules').hide();
        $('#Score').hide();

And i want to show my contents opening with simple fadeIn effect. If i click the other links all objects will hide them self or fadeOut, new content object's goes load and will open with fadeIn effect.

PS : When i load my content to i can't use the content features like jquery.scroll plug in..All of them are disabling themself.

Really confused. Any suggestions?

Thanks.

Answer 1

Assuming you're going to fade all divs inside #content and #soru1 is the div you want to show, you could simply use this:

$('#content div').fadeOut(function() {
    $("#soru1").fadeIn(2000);
});

This will fade every div inside #content .

To fade only specific divs and not every div element inside #content , you can change your code into this, as example:

<div id="content">

    <div id="MainPage" class='toFade'><!-- content goes here --></div>
    <div id="HowTo"><!-- content goes here --></div>
    <div id="Prizes class='toFade'"><!-- content goes here --></div>
    <div id="Rules"><!-- content goes here --></div>
    <div id="Score" class='toFade'><!-- content goes here --></div>

</div>

And do the following:

$('#content .toFade').fadeOut( function() {
    /* ... */
});

Then, only the selected divs would fade.