添加jQuery菜单fadeIn和fadeOut

我在考虑用jQuery制作一个简单的菜单：单击菜单项，会显示一个包含信息的div。我想添加一个fadeIn和fadeOut的显示div，但我不知道如何实现这一点

这是我正在使用的代码

html:

CSS:

---

您应该能够将fadeIn和fadeOut效果添加到.hover鼠标事件中。

---

您可以尝试类似的方法（不使用css类）：

标记：

<div id="wrap">
    <ul id="divtoggle">
        <li><a id="togglediv1" href="#div1">show div 1</a></li>
        <li><a id="togglediv2" href="#div2">show div 2</a></li>
        <li><a id="togglediv3" href="#div3">show div 3</a></li>
    </ul>
   <div id="content">
        <div id="div1">
            <p>This is the content inside the first container</p>
        </div>
        <div id="div2">
            <p>This is the content inside the second container</p>
        </div>
        <div id="div3">
            <p>This is the content inside the third container</p>
        </div>
    </div>
</div>

或者使用

fadeOut

、

fadeIn

和

fadeToggle

效果：

$("#divtoggle").delegate("a", "click", function(e) {
    var id = ($(this).attr("href"));
    $("#content div").fadeOut("slow");
    $(id).fadeToggle("slow");
});

---

脸是什么？你说的是fadeIn吗？那你就不需要切换div了。

#div1, #div2, #div3 {
 display:none;   
}
.togglediv1 #div1, .togglediv2 #div2, .togglediv3 #div3{
 display:block;   
}

<div id="wrap">
    <ul id="divtoggle">
        <li><a id="togglediv1" href="#div1">show div 1</a></li>
        <li><a id="togglediv2" href="#div2">show div 2</a></li>
        <li><a id="togglediv3" href="#div3">show div 3</a></li>
    </ul>
   <div id="content">
        <div id="div1">
            <p>This is the content inside the first container</p>
        </div>
        <div id="div2">
            <p>This is the content inside the second container</p>
        </div>
        <div id="div3">
            <p>This is the content inside the third container</p>
        </div>
    </div>
</div>

$("#divtoggle").delegate("a", "click", function(e) {
    var id = ($(this).attr("href"));
    $("#content div").hide("slow");
    $(id).toggle("slow");
});

$("#divtoggle").delegate("a", "click", function(e) {
    var id = ($(this).attr("href"));
    $("#content div").fadeOut("slow");
    $(id).fadeToggle("slow");
});