jQuery How do you get an image to fade in on load?

Question

All I want to do is fade my logo in on the page loading. I am new today to jQuery and I can\'t managed to fadeIn on load please help. Sorry if this question has already been

Answer 1

OK so I did this and it works. It's basically hacked together from different responses here. Since there is STILL not a clear answer in this thread I decided to post this.

<script type="text/javascript">
  $(document).ready(function () {
    $("#logo").hide();
    $("#logo").bind("load", function () { $(this).fadeIn(); });
  });
</script>

This seems to me to be the best way to go about it. Despite Sohnee's best intentions he failed to mention that the object must first be set to display:none with CSS. The problem here is that if for what ever reason the user's JS is not working the object will just never appear. Not good, especially if it's the frikin' logo.

This solution leaves the item alone in the CSS, and first hides, then fades it in all using JS. This way if JS is not working properly the item will just load as normal.

Hope that helps anyone else who stumbles into this google ranked #1 not-so-helpful thread.