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

You have to hide the div first.

$('#toolbar').hide().fadeIn('slow');

or like this, so the toolbar won't be visible while the page is still loading:

<div id="toolbar" style="visibility: hidden">...</div>

$('#toolbar')
    .css({
        visibility: "visible",
        opacity: 0
    })
    .fadeIn('slow')
;

Answer 2

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.

Answer 3

$("#toolbar").css("display","none"); 

$("#toolbar").css("display","block").fadeIn('slow');

or you could use animate function. Animate in JQuery

Answer 4

One thing i noticed is your script source.

<script src="../../Scripts/jquery-1.3.2-vsdoc.js" type="text/javascript"></

should be

<script src="../../Scripts/jquery-1.3.2.js" type="text/javascript">

also

display: hidden;

is not valid should be

Visibility: hidden;

to hide the element

Answer 5

or display: none; for hiding the element.

and for showing:

display: block;

and retrieving the element's state:

var state = $("#ex").css("display"); 

if(state == "none")
{
...
}
else
...