如何使用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属性的有效值.你应该使用display:none;

这就是为什么你立即看到它,它从来没有被隐藏,因为浏览器不知道如何处理显示:隐藏; 宣言.

你可能想要的可见性:隐藏; 属性虽然因为这样工具栏将是不可见但呈现的,所以它将占用文档中的空间.这将确保您淡入时不会推动整个页面.