How do I fade a div in with jQuery?

Question

I have a div defined as the following in my css file:

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

Then, in my HTML file I have:

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

and finally, I have the following script at the top of my html page that I figured would fadeIn my div when the page loads:

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

What am I doing wrong? It instantly shows up as if it wasn't fading in at all. Am I not accessing my div correctly in the jquery script?

---

Based off some of the answers I've changed my div to:

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

With the same script call, and now my div starts out hidden and never shows up. What else am I doing wrong?

Answer 1

See: http://www.w3schools.com/css/pr_class_display.asp

hidden is not a valid value for the display property. You should use display:none;

That's why you see it instantly, it never has been hidden because the browser has no idea what to do with the display:hidden; declaration.

You propably want the visibility:hidden; property though because that way the toolbar will be invisible but rendered, so it will take it's space in the document. Which will make sure your whole page won't be pushed around when you fade it in.