Menu
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> 
298
To make the image transition with a fading effect we use the asynchronous function. Inside the asynchronous function, use another setInterval() method to slowly decrease the opacity of the topmost image till opacity becomes 0. By doing this, the topmost image will appear to fade away slowly.
jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle()
jQuery Effect fadeOut() Method The fadeOut() method gradually changes the opacity, for selected elements, from visible to hidden (fading effect).
JQuery offers four fading methods that allow you to change the transparency of elements. These methods include, fadeIn(), fadeOut(), fadeToggle(), and fadeTo().
This thread seems unnecessarily controversial.
If you really want to solve this question correctly, using jQuery, please see the solution below.
The question is "jQuery How do you get an image to fade in on load?"
First, a quick note.
This is not a good candidate for $(document).ready...
Why? Because the document is ready when the HTML DOM is loaded. The logo image will not be ready at this point - it may still be downloading in fact!
So to answer first the general question "jQuery How do you get an image to fade in on load?" - the image in this example has an id="logo" attribute:
$("#logo").bind("load", function () { $(this).fadeIn(); }); This does exactly what the question asks. When the image has loaded, it will fade in. If you change the source of the image, when the new source has loaded, it will fade in.
There is a comment about using window.onload alongside jQuery. This is perfectly possible. It works. It can be done. However, the window.onload event needs a particular bit of care. This is because if you use it more than once, you overwrite your previous events. Example (feel free to try it...).
function SaySomething(words) { alert(words); } window.onload = function () { SaySomething("Hello"); }; window.onload = function () { SaySomething("Everyone"); }; window.onload = function () { SaySomething("Oh!"); }; Of course, you wouldn't have three onload events so close together in your code. You would most likely have a script that does something onload, and then add your window.onload handler to fade in your image - "why has my slide show stopped working!!?" - because of the window.onload problem.
One great feature of jQuery is that when you bind events using jQuery, they ALL get added.
So there you have it - the question has already been marked as answered, but the answer seems to be insufficient based on all the comments. I hope this helps anyone arriving from the world's search engines!
119
You have a syntax error on line 5:
$('#logo').hide();.fadeIn(3000); Should be:
$('#logo').hide().fadeIn(3000); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
