jQuery How do you get an image to fade in on load?
fadein, jquery, onload
Solution
I figure out the answer! You need to use the window.onload function as shown below. Thanks to Tec guy and Karim for the help. Note: You still need to use the document ready function too.
window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););
It also worked for me when placed right after the image...Thanks
Problem
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 answered I have had a look and try to adapt other answers for different question but nothing seems to work and its starting to frustrate me. Thanks. Code: ``` <script type="text/javascript"> $(function () { .load(function () { // set the image hidden by default $('#logo').hide();.fadeIn(3000); }} </script> <link rel="stylesheet" href="challenge.css"/> <title>Acme Widgets</title> </head> <body> <div id="wrapper"> <div id="header"> <img id="logo" src="logo-smaller.jpg" /> </div> <div id="nav"> navigation </div> <div id="leftCol"> left col </div> <div id="rightCol"> <div id="header2"> header 2 </div> <div id="centreCol"> body text </div> <div id="rightCol2"> right col </div> </div> <div id="footer"> footer </div> </div> </body> </html> ```