jquery - 如何使用 jQuery 淡入 div？

Question

我在 css 文件中定义了一个 div，如下所示:

    #toolbar
    {
        position:relative;
        top: 0;
        height: 50px;
        background-color: #F4A83D;
        width: 100%;
        text-align: center;
        display: hidden;
    }

然后，在我的 HTML 文件中:

 <div id="toolbar">
        TestApp ToolBar
        <br />
        You are visiting:
        <%=ViewData["url"] %>
    </div>

最后，我的 html 页面顶部有以下脚本，我认为当页面加载时它会在我的 div 中淡出:

   <script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
   <script type="text/javascript">
        $(document).ready(function() {
            $("#toolbar").fadeIn("slow");
        });
    </script>

我做错了什么？它立即出现，就好像它根本没有淡入一样。我没有在 jquery 脚本中正确访问我的 div 吗？

<小时/>

根据一些答案，我将 div 更改为:

<div id="toolbar" style="visibility: hidden">
        TestApp ToolBar
        <br />
        You are visiting:
        <%=ViewData["url"] %>
    </div>

使用相同的脚本调用，现在我的 div 开始隐藏并且永远不会显示。我还做错了什么？

Answer 1

参见:http://www.w3schools.com/css/pr_class_display.asp

hidden 不是显示属性的有效值。您应该使用 display:none;

这就是为什么你会立即看到它，它从未被隐藏，因为浏览器不知道如何处理 display:hidden;声明。

您可能想要可见性:隐藏；属性，因为这样工具栏将不可见但会呈现，因此它将占用文档中的空间。这将确保您的整个页面在淡入时不会被移动。