Simple jQuery fade-in when document loads / no user interaction should be required

Question

Platform: ASP.NET 3.5, ASP.NET Ajax intermixed

I'm very green to jQuery, so have been having a hard time with what I assume to be trivial.

All I need to do is create the following scenario

1. user logs in to my site, and I take him/her to a 'dashboard'
2. I want a nice little bar to 'fade in' with some information I want to draw his/her attention to

The examples on jQuery seem to suggest I need to click something to make it happen - but I don't want any user interaction. User logs in, user sees a nice fadein info bar. That's it.

I saw a few examples and can't get it to work and I have tried both the following:

(1)

  $(document).ready(function () {           
           $("#fadein").fadein("slow");           
   });

(2)

$("#fadein").bind("load", function () { $(this).fadeIn(); });

My div is as follows

<div id="fadein" style="display:none;">this will fade in now yeah</div>

(PS - I have tried with display:none and without it. Made no difference)

What am I missing? What am I doing wrong? Just in case it helps

• I moved the from the contentpage to the masterpage, made no difference

Any help appreciated.

Answer 1

The first should work, just fix the function name which is .fadeIn() instead of .fadein():

$('#fadein').fadeIn('slow');
                 ^