jQuery导航的淡入，隐藏，显示，反弹和计时

Question

这是一个非常简单的问题！ 我想使用jQuery创建导航菜单和内容。

这是我的导航链接：

<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>

内容：

<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>

样本导航代码（包括第一个链接代码）：

$(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);

         });
 });

...而且我还有5个on（'click'）功能可以将菜单导航到我的内容。 问题是每次加载所有这些内容都没有任何效果。 我想在加载过程完成后加载我的内容。 另一个问题是我将hide（）放在每个函数中以隐藏其他对象。

没有重复的代码，有没有办法制作一个函数：

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

我想用简单的fadeIn效果显示我的内容开头。 如果我单击其他链接，则所有对象将自行隐藏它们或自己淡出，新内容对象将被加载，并以fadeIn效果打开。

PS：当我将内容加载到 我无法使用诸如jquery.scroll插件之类的内容功能。所有这些功能均已禁用。

真的很困惑。 有什么建议么？

谢谢。

Answer 1

假设您要淡入#content内的所有div，而#soru1是要显示的div，则可以简单地使用以下代码：

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

这将使#content每个div消失。

要仅淡化特定的div而不是#content每个div元素，您可以将代码更改为此，例如：

<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>

并执行以下操作：

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

然后，只有选定的div会淡出。