Question

分裂不会淡入或淡出。

我试过这两个案子。但它不起作用。我想fadeIn和fadeOut division“submenu1”和“submenu2”。

最初，我对两个部门都显示为无。

 <!DOCTYPE html>
 <html>
   <head>
      <title>
          cheaphotel.com
      </title>
      <link rel="stylesheet" type="text/css" href="home.css">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script type="text/javascript">
        $("#submenu1").fadeIn("slow");      
    </script>
</head>
<body>
    <div id="maindiv">
        <img src="Capture1.jpg" height="150px" alt="logo" width="200px">
        <table>
            <tr>
                <td><label id="username">Username:</label></td>
                <td><input type="email" id="emaillog" name="emaillog"></td>
            </tr>
            <tr>
                <td><label id="password">Password:</label></td>
                <td><input type="password" id="passlog" name="passlog"></td>
            </tr>
            <input type="submit" value="Login" id="login">
        </table>
    </div>
    <div id="menu">
        <button id="home">Home</button>
        <button id="facilities">Facilities</button>
        <button id="booking">Booking</button>
        <button id="aboutus">About Us</button>
        <button id="contactus">Contact Us</button>
    </div>
    <div id="submenu1" class="submenu1">
        <button id="room">Room</button>
        <button id="decors">Decors</button>
        <button id="meeting">Meeting room</button>
    </div>
    <div id="submenu2">
        <button id="availability">Availability</button>
        <button id="status">Booking status</button>
    </div>
</body>

Answer 1

当dom加载并准备就绪时，脚本应该可以正常工作。所以保持你的脚本

$(document).ready(function(){
    // here...
});

它将等到装入dom然后执行脚本。

另一点是要使.fadeIn()工作，以保持submenu1部分已隐藏。

所以脚本应该是这样的，

$(document).ready(function(){
    $("#submenu1").hide();  // hide it first
    $("#submenu1").fadeIn("slow");  // slowly fadeIn
    $("#submenu2").fadeOut("slow");  // fadeOut #submenu2
});

jsFiddle

Answer 2

你的代码看起来就像这个小提琴一样。

您必须先.hide()该元素，以便以后可以.fadeIn()。

FIDDLE

Jquery部分不起作用。分工不褪色

2 个答案: