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个（'click'）功能可以将我的菜单导航到我的内容。问题是每次加载所有这些内容都没有任何影响。我想在加载过程完成后加载我的内容。另一个问题是我在每个函数中放置 hide（）来隐藏其他对象。

有没有办法在没有重复代码的情况下创建函数，如：

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

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

P.S：当我将内容加载到时，我无法使用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才会消失。

jQuery导航淡入淡出，隐藏，显示，弹跳和计时

1 个答案: